ausblenden und zeigen Eltern und Kind Menüleiste

Question

Ich versuche, eine Menüleiste zu machen. Wenn jemand auf elterliches li klickt (showul) will ich slidedown Kind li (hideul). und wieder, wenn jemand auf einen anderen Elternteil klickt, sollte er das entsprechende Kindli öffnen sowie alle zuvor geöffneten li ausblenden. Überprüfen Sie meine jsfiddle zum besseren Verständnis. Freundlich helfen. Ich lerne jQuery.

<ul> 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
    <ul class="hideul"> 
     <li>About Us</li> 
     <li>Contact Us</li> 
    </ul> 
    </li> 
    <li><a href="#" id="category" class="showul">Category Option</a> 
    <ul class="hideul"> 
     <li>Add Category</li> 
     <li>Category List</li> 
    </ul> 
    </li> 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
    <ul class="hideul"> 
    <li>Add Post</li> 
    <li>Post List</li> 
    </ul> 
    </li> 
</ul> 


$(document).ready(function() { 
    $(".showul").click(function(){ 
     $(".hideul").slideToggle("slow"); 
    }); 
}); 

Answer 1

Zunächst müssen Sie siblings() verwenden, um die ul die aktuellen a Zusammenhang zu finden. Dann zu verstecken all andere ul während der aktuellen Makel, können Sie diese verwenden:

$(".showul").click(function() { 
    var $hideUl = $(this).siblings(".hideul"); 
    var show = !$hideUl.is(':visible'); 
    $('.hideul').slideUp('slow'); 
    if (show) 
     $hideUl.slideToggle('slow'); 
}); 

Update fiddle

Answer 2

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).parent().find(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).siblings(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

1. Um die ul Sie dann auf Eltern von Anker gehen müssen finden die ul
2. Sie können auch feststellen, verwenden .siblings()

Answer 3

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(this).next(".hideul").slideToggle("slow"); // get the next element of anchor tag and toggle it 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="#" id="title">Title & Slogan</a></li> 
 
    <li><a href="#" id="social">Social Media</a></li> 
 
    <li><a href="#" id="copyright">Copyright</a></li> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
     <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
     <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Post</li> 
 
     <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Try this:

$(document).ready(function() { 
    $(".showul").click(function(){ 
    console.log("here") 
    $(this).next(".hideul").slideToggle("slow"); 
    }); 
}); 

Answer 4

Sie benötigen eine Kombination aus slideUp() verwenden - anderen und slideToggle() zu verstecken - Zustand des Stromes umgeschaltet werden Elemente.

Verwenden Sie auch :visible Selektor, um die Ergebnisse aus der Abfrage weiter zu reduzieren.

$(".showul").click(function(){ 
    var $currEl = $(this).next('.hideul'); 
    $(".hideul:visible").not($currEl).slideUp("slow"); 
    $currEl.slideToggle("slow"); 
}); 

Updated Fiddle

Answer 5

Es gibt zwei Schritte, die Sie durchlaufen müssen.

1. Ausblenden alle zuvor geöffneten Blöcke
2. Anzeigen der gewünschten Block

$(document).ready(function() { 
 
    $(".showul").click(function(){ 
 
    $(".hideul").slideUp("slow"); 
 
    $(this).parent().find(".hideul").slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" id="update" class="showul">Update Pages</a> 
 
    <ul class="hideul"> 
 
     <li>About Us</li> 
 
     <li>Contact Us</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="category" class="showul">Category Option</a> 
 
    <ul class="hideul"> 
 
     <li>Add Category</li> 
 
     <li>Category List</li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" id="postoption" class="showul">Post Option</a> 
 
    <ul class="hideul"> 
 
    <li>Add Post</li> 
 
    <li>Post List</li> 
 
    </ul> 
 
    </li> 
 
</ul>