隐藏和显示父母和孩子的脑膜

Question

我在试着做一个小菜单。当有人点击父母李(显示)，我想滑落孩子李(隐藏)。再次，当有人点击另一个家长李，它应该打开各自的孩子李以及隐藏所有以前打开的李。检查我的小提琴，以获得更好的理解。帮帮忙吧。我正在学习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');
});

更新小提琴

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，您需要去找锚的父级，然后找到ul。
2. 您也可以使用.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");
  });
});