Javascript 从divs显示/隐藏列表ul

我有以下代码：

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

---

我想在单击时显示/隐藏每个子项。我尝试使用jQuery，但没有成功。

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

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

工作示例：

使用以下命令：

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

---

您可以这样做：

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

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

试试这个：

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

---

你的ul课程在哪里。我认为这是最干净的jQuery代码。

您的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>

CSS:

---

您的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> 

---

-1他根本没有尝试，这就是我从他的问题中读到的。你的HTML片段看起来无效；建议您验证它，然后将其包含在问题中。在锚定标记上而不是在li上处理单击事件非常重要，因为锚定标记已经有关联的事件，在您的情况下，该事件将附加到url位置，并在浏览器上添加不必要的历史记录条目。因此，那里的返回值为false。并且您的html是未验证的。你不能让ul在ul里面，除非他们在李的里面。

.sub_cat_box {display: none;}

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

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