Schließen Sie die Umschalttaste, wenn Sie auf den Navigationslink klicken

Question

Derzeit wird der Schalter korrekt geöffnet und ein "geöffnetes" css wird auf die Navigation angewendet, wenn darauf geklickt wird. Ich kann das Skript jedoch nicht dazu bringen, die Klasse zu entfernen, wenn Sie auf einen Menüeintrag klicken.

Normalerweise wäre dies kein Problem, aber dieses Menü wird verwendet, um auf einer Seite zu verankern, um Tags zu verankern, muss also nach dem Klicken geschlossen werden.

Hier ist meine Grund Markup:

$(document).ready(function(){ 
    $("a.toggle").click(function(){ 
     $("nav > ul").slideToggle(500); 
     $(this).toggleClass("open"); 
    }); 
}); 

HTML

<nav id="main"> 
    <a href="#" class="toggle"></a> 
    <ul> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
     <li><a href="#">Example Link 1</a></li> 
    </ul> 
</nav> 

Answer 1

Sie suchen müssen, wenn Sie suchen müssen, wenn Sie die neueste Version von Jquery haben, wenn es AddClass nicht verwendet und remoeclass anstelle von toggleclass

Answer 2

Sie können Click-Ereignis an den Menüpunkt anhängen, um die Anzeige des Hauptmenüs umzuschalten. Hoffe, das ist was du suchst.

$("#main ul li a").click(function() { 
    $("nav > ul").slideToggle(500); 
    $("a.toggle").toggleClass("open"); 
}); 

$(function() { 
 
    $("a.toggle").click(function() { 
 
\t $("nav > ul").slideToggle(500); 
 
\t $(this).toggleClass("open"); 
 
    }); 
 

 
    $("#main ul li a").click(function() { 
 
\t $("nav > ul").slideToggle(500); 
 
\t $("a.toggle").toggleClass("open"); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav id="main"> 
 
<a href="#" class="toggle">Home</a> 
 
<ul> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
    <li><a href="#">Example Link 1</a></li> 
 
</ul> 
 
</nav>