Javascript Dropdown-Menü onclick, (schließen andere, wenn man geöffnet ist)

Question

Ich habe ein Dropdown-Menü für eine responsive Website erstellt. Aber ich habe ein kleines Problem. Wenn ich auf die erste Menüleiste klicke, werden alle Registerkarten geöffnet.

DEMO:https://jsfiddle.net/vth4gn6w/2/

Was ich will:

1. Wenn ich auf der ersten Registerkarte klicken, möchte ich, dass Reiter nur zu öffnen, ohne sie auf die anderen Registerkarten aktivieren.
2. Wenn ich auf die zweite Registerkarte klicke, möchte ich, dass die erste Registerkarte automatisch geschlossen wird.

Hoffe jemand kann mir helfen, und PLZ Geige verwenden, um mir zu zeigen, wie es gemacht wird. Danke

Answer 1

Auf welches Element wird geklickt? Nicht die gesamte #nav-mobile, sondern die a s innen. Sie möchten #nav-mobile a als Ihren Selektor.

Nun, wo sind die ul s in Bezug auf ihre entsprechenden a (in der Callback-Funktion als $(this) bezeichnet)? Sie sind unmittelbare Geschwister, also $(this).next('ul') ist Ihre beste Wette.

Um alle anderen Menüoptionen zu schließen, speichern Sie die Variable ul in einer Variablen und verwenden Sie .not(), um die anderen ul s auszuwählen.

Ihr Code sollte jetzt so aussehen.

$(document).ready(function() { 
 
    $('#nav-mobile ul').hide(); 
 
    $('#nav-mobile a').click(function(e) { 
 
     e.preventDefault(); 
 
     var $menuItem = $(this).next('ul'); 
 
     $menuItem.slideToggle(); 
 
     $('#nav-mobile ul').not($menuItem).slideUp(); 
 
    }); 
 
});

#tab1, #tab2, #tab3{ 
 
    background-color:grey; 
 
    color:white; 
 
    padding:5px 10px; 
 
    display:block; 
 
    width:100px; 
 
    border-bottom:1px solid; 
 
} 
 

 
#tab1:hover, #tab2:hover, #tab3:hover{ 
 
    background-color:darkgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav-mobile"> 
 
    <a href="#" id="tab1">Products</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="index.php">Home</a></li> 
 
     <li><a href="#">Why Us</a></li> 
 
     <li><a href="#">Our Work</a></li> 
 
    </ul> 
 
    <a href="#" id="tab2">About</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="#">Our Equipment</a></li> 
 
     <li><a href="#">Video Production</a></li> 
 
    </ul> 
 
    <a href="#" id="tab3">Contact</a> 
 
    <ul style="display: none;"> 
 
     <li id="last-child"><a href="#">Contact</a></li> 
 
     <li id="last-child"><a href="#">Social Media</a></li> 
 
    </ul> 
 

 
</div>

Answer 2

Sie müssen Ihre js reparieren, damit es das gesamte nav-Objekt nicht rutscht.

https://jsfiddle.net/vth4gn6w/2/#&togetherjs=0vaEOk1NNT

$(document).ready(function() { 

    $('#nav-mobile ul').hide(); 
    $('#tab1').click(function(e) { 
     e.preventDefault(); 
     $('#tab1ul').slideToggle(); 
    }); 

}); 

i-Setup das Beispiel für Sie tab1 so, wenn Sie die erste Registerkarte des Menüs nur klicken, die ich die ID erstellt tab1ul erweitert. Sie können dies als Anleitung befolgen, um die Funktionalität wie gewünscht zu vervollständigen.