javascript - 从 div 中显示/隐藏列表 ul

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 并在其上调用切换方法。默认情况下，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 和其他 ul 必须在 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();
  });

现场演示

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();
});