Verankertes Link-Scroll-Interferieren mit der Schließen-Funktion im Menü

Wir versuchen, eine verankerte Verknüpfung zu erhalten, um das "Menü" zu schließen, indem Sie dem Body eine Klasse hinzufügen.Verankertes Link-Scroll-Interferieren mit der Schließen-Funktion im Menü

Das Problem ist, dass das Menü Links als Teil der Navigation verankert hat. Versuchen Sie, eine Funktion hinzuzufügen, die nach der Klasse sucht und dann die toggleClass ausführt, bevor Sie zum verankerten Link wechseln.

<script type="text/javascript"> 
$(document).ready(function(e) { 

// Working JS that Identifies the Class and Adds the "menu_open" or toggles to Subtract 
$(".menu, .arrow1, .menuAccountAccess").on("click", function() { 
    $(this).toggleClass("active"); 
    $('body').toggleClass('menu_open'); 
}); 

// The Main Navigation has some anchored links and the below code does not work as we also have a # link scroll code 
$(".NavigationAnchoredLinkClass").on("click", function() { 
    $('body').toggleClass('menu_open'); 
}); 

// Scroll function for Anchored Links 
$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html, body').animate({ 
        scrollTop: target.offset().top - 60 
      }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

}); 
</script> 

<body class=""> 
     <p> 
     Anchored Links work fine with a <a href="#anchoredlink">Link</a> 
     </p> 
     <ul> 
     <li class="NavigationAnchoredLinkClass"> 
      <a href="siteurl/#achoredlink">Link</a> 
     </li> 
     </ul> 
</body>

Quelle

2016-07-16 user2471

COuld Sie bitte füllen Sie HTML-Code, da es einige fehlende Elemente aus dem Code wie menu_open sind, –

Ich fügte eine Check-Klasse in die verankerte Link-Rolle. Alle Check-Klassen sehen, ob das Body-Div das "menu_open" hat. Wenn "menu_open" gefunden wird, wird die Klasse auf "leer" gesetzt, wodurch das Menü geschlossen wird, während eine andere Funktion ausgeführt wird.

<script type="text/javascript"> 
$(document).ready(function(e) { 
    $(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 

    // checks body for class 
    if ($('body').hasClass('menu_open')) { 
     // if class is found it toggles the class to blank which closes the menu 
     $('body').toggleClass('menu_open'); 
    } 

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
     $('html, body').animate({ 
     scrollTop: target.offset().top - 60 

     }, 1000); 
     return false; 
    } 
    } 
});

});

Quelle

2016-07-16 13:36:15 user2471

Verankertes Link-Scroll-Interferieren mit der Schließen-Funktion im Menü

Antwort

Verwandte Themen