隐藏并显示父母和孩子菜单栏

Question

我正在尝试制作菜单栏。当有人点击父李（showul）时，我想滑动李李（hideul）。并且当有人点击另一位家长李时，应该打开相应的孩子李以及隐藏所有以前打开的李。检查我的jsfiddle以获得更好的理解。请帮助。我在学习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

首先，你需要使用siblings()找到与当前a的ul。然后隐藏所有其他ul同时切换当前的一个，你可以使用这个：

$(".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. 找到你需要去锚的父然后找到UL
2. 您还可以在UL使用.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>

试试这个：

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

Answer 4

您需要使用的slideUp()组合 - 隐藏他人，slideToggle() - 切换当前的状态元素。

此外，使用:visible选择器可进一步减少查询结果。

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

Updated Fiddle

Answer 5

还有你必须要经过两个步骤。

1. 隐藏所有先前打开的块
2. 显示通缉块

$(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>