Question

我正在尝试为我的电子商务创建自定义导航ul。当您单击某个类别时，我希望显示子类别，有时子类别包含更多子类别。但在我的代码中，当我点击特定类别时，它正在运行。但每次我点击子类别（包含其他子类别）时，一切都被隐藏了。也许这有点难以理解，所以让我告诉你我的代码

HTML

<ul class="product-categories">
   <li class="cat-parent">
      <a href="#">Main category</a>
      <ul class="children">
          <li class="cat-parent">
              <a href="#">Sub-category 1</a>
              <ul class="children">
                  <li><a href="#">test1</a></li>
                  <li><a href="#">test2</a></li>
              </ul>
          </li>
          <li><a href="#">blabla1</a></li>
          <li><a href="#">blabla2</a></li>
      </ul>
   </li>
   <li class="cat-parent">
      <a href="#">Main category 2</a>
      <ul class="children">
          <li class="cat-parent">
              <a href="#">Sub-category 1-2</a>
              <ul class="children">
                  <li><a href="#">test1-2</a></li>
                  <li><a href="#">test2-2</a></li>
              </ul>
          </li>
          <li><a href="#">blabla1-2</a></li>
          <li><a href="#">blabla2-2</a></li>
      </ul>
   </li>
</ul>

JQUERY

jQuery('ul.product-categories > li.cat-parent').click(function() {
    event.preventDefault();
    var direct_child_ul = jQuery(this).find("> ul.children");
    if(direct_child_ul.hasClass('jq_on')) {
        direct_child_ul.hide().removeClass('jq_on');
    } else {
        direct_child_ul.show().addClass('jq_on');
    }
});

我的小提琴：https://jsfiddle.net/6cvh0838/2/

正如您所看到的，当您点击＆＃34;主要类别＆＃34;时，它正在运行。如果你重新点击它，它将隐藏，它正在工作。但是如果你点击＆＃34;主要类别＆＃34;，然后点击＆＃34;子类别1＆＃34;，它就会消失...然后只需重新点击＆＃34;主要类别＆＃34;你会看到＆＃34; Sub-category 1＆＃34;它正在显示：阻止;

我的问题：如何点击＆＃34;子类别1＆＃34;没有隐藏＆＃34;主要类别＆＃34;的孩子？

Answer 1

编辑：忘记切换选项...

以下是您的解决方案：

https://jsfiddle.net/pfjsoL9t/2/

HTML：

<ul>
<li>
  <a href="#">Main category</a>
  <ul>
      <li>
          <a href="#">Sub-category 1</a>
          <ul>
              <li><a href="#">test1</a></li>
              <li><a href="#">test2</a></li>
          </ul>
      </li>
      <li><a href="#">blabla1</a></li>
      <li><a href="#">blabla2</a></li>
  </ul>
</li>
<li>
  <a href="#">Main category 2</a>
  <ul>
      <li>
          <a href="#">Sub-category 1-2</a>
          <ul>
              <li><a href="#">test1-2</a></li>
              <li><a href="#">test2-2</a></li>
          </ul>
      </li>
      <li><a href="#">blabla1-2</a></li>
      <li><a href="#">blabla2-2</a></li>
  </ul>

使用Javascript：

$(document).ready(function() {
   jQuery('ul li ul').hide();
   jQuery('a').click(function() {
       $(this).parents('li').first().find('ul').first().toggle();
   });
});

Answer 2

我不能对luc的帖子发表评论，但是使用.toggle而不是.show，你有解决方案。

$(this).parents('li').first().find('ul').first().toggle();

Answer 3

你有几件事情要发生：

您没有阻止传播 - 所有cat-parent元素在层次结构中将接收事件。 event.preventDefault（）可以不要停止传播。您需要从事件中返回false 处理程序或调用event.stopPropagation（）;
当您单击不是＆lt; li.cat-parent＆gt;的项目时，将触发事件处理程序。在封闭的cat-parent，导致整个父级关闭。您可以确定封闭的＆lt; li＆gt;点击的项目是 cat-parent，如果没有，请不要关闭。

这是我的更新：https://jsfiddle.net/wbdarby/6cvh0838/3/

ll.get(i).get(j).get(k)

Jquery find（）只有直接的孩子没有按预期工作

3 个答案: