Question

我有这段代码：

<ul>
 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 1</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

 </div> 

 <div class="sub_cat_box"> 

 <li class="current"><a href="#">Cat 2</a></li> 
   <ul> 
     <li><a href="#">Prod1</a></li> 
     <li><a href="#">Prod1</a></li> 
   </ul> 

  </div> 
</ul>

我想点击<ul>时显示/隐藏每个孩子<li class='current'>。我尝试使用jQuery，但我没有尝试。

Answer 1

使用jQuery通过类选择器选择li元素，然后将事件处理程序绑定到click函数。绑定函数应该找到与所选元素相关的下一个ul，并在其上调用toggle方法。默认情况下，jQuery切换方法将切换元素的可见性：

$(".current").click(function(){
  $(this).next("ul").toggle();
});

工作示例：http://jsfiddle.net/ytXFQ/

Answer 2

您的HTML不正确。

尝试使用此HTML结构：

<ul>
 <li class="current">
    <a href="javascript: toggleChildren('cat1');">Cat 1</a>
    <div class="sub_cat_box" id="cat1">
      <ul> 
        <li><a href="#">Prod1</a></li> 
        <li><a href="#">Prod1</a></li> 
      </ul> 
    </div>
  </li> 
</ul>

功能：

function toggleChildren(id) {

   var elem = document.getElementById(id);
   if(!elem) alert("error: not found!");
   else {

      if(elem.style.display == "block")
         elem.style.display = "none";

      else
         elem.style.display = "block";
   }
}

CSS：

.sub_cat_box {display: none;}

Answer 3

您的HTML无效（在ul中只允许使用il，而div和其他uls必须在lis中）。它应该是这样的：

<ul>

    <li class="current"><div class="sub_cat_box"> 
       <a href="#">Cat 1</a>
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul> 
       </div> 
      </li> 
     <li class="current">     
      <div class="sub_cat_box"> <a href="#">Cat 2</a> 
       <ul> 
         <li><a href="#">Prod1</a></li> 
         <li><a href="#">Prod1</a></li> 
       </ul>         
      </div> 
    </li>
    </ul>

完成后，您可以应用以下代码：

$(".current").click(function(e){
     $(this).find('ul').toggle();
})

Answer 4

$('li.current').on('click', 'a', function() {
  $(this).parent().find('ul').toggle();
  return false;
});

Answer 5

使用此：

$(document).on("click", "li.current > a", function(){
   $(this).next().slideToggle();
});

Answer 6

你可以这样做：

$('.current').next('ul').hide(); // Make them hide by default
  $('.current').click(function(){
     $(this).next('ul').slideToggle();
  });

LIVE DEMO

Answer 7

试试这个：

$("ul > li.current").on('click', 'a', function(){
      $('ul.class').children().toggle();
    });

哪个类是你的ul类。我认为这是最干净的jQuery代码。

Answer 8

$('li.current a').click(function(){
  $(this).parent().next('ul').slideToggle(); // or
  //$(this).parent().next('ul').toggle();
});

显示/隐藏来自div的列表ul

8 个答案: