Question

我正在尝试制作菜单栏。当有人点击父李（showul）时，我想滑下孩子李（hideul）。并且当有人点击另一个父li时，它应该打开相应的子li以及隐藏所有先前打开的li。检查我的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()来查找与当前ul相关的a。然后在切换当前的ul时隐藏所有其他$(".showul").click(function() { var $hideUl = $(this).siblings(".hideul"); var show = !$hideUl.is(':visible'); $('.hideul').slideUp('slow'); if (show) $hideUl.slideToggle('slow'); });，您可以使用：

CREATE TABLE E_PROJ_DETAIL_NEW AS 
SELECT * FROM 
E_PROJ_DETAIL 
WHERE 
CATEGORY_ID NOT IN (SELECT PRIMARY_KEY FROM Y_OBJ_CATEGORY WHERE TREE_POSITION='VEN$_MADD');

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>

要查找ul，您需要转到锚的父级，然后找到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

您必须完成两个步骤。

隐藏所有先前打开的块
显示想要的块

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

隐藏并显示父母和子女菜单

5 个答案: