Question

我的javascript适用于子菜单，但不适用于子子菜单：它应该隐藏，直到我点击＆＃34;季节＆＃34;然后它在父项目下打开（向下滑动）。

html＆amp;的javascript：

＆＃13;

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});

$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu-2').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-menu">
  <ul>
    <li><a href="http://piirissaareturism.ee/">Home</a>
    </li>
    <li><a href="http://piirissaareturism.ee/kasulik-info/">Information</a>
      <ul class="dropdown-menu">
        <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Season</a>
          <ul class="dropdown-menu-2">
            <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">Winter</a>
            </li>
            <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Spring</a>
            </li>
          </ul>
        </li>
        <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">Food</a>
        </li>
      </ul>
    </li>
    <li><a href="http://piirissaareturism.ee/meist/">Contact</a>
    </li>
  </ul>
</div>

＆＃13;

看看jsfiddle

更新：常见问题，我们几乎就在那里，我们只需要找出，为什么.find('a')（看看LinkinTED解决方案）会影响所有锚点，而不仅仅是＆＃34;信息＆＃34;和＆＃34;四季＆＃34;！请！

Answer 1

使用find('ul')会触发元素内的所有列表。

相反，请使用children('ul')。

此外，单击“季节”会关闭第一级子菜单，而不是打开第二级子菜单。您可以通过绑定a上的点击事件来解决这个问题。

$('#main-menu > ul > li:has(.dropdown-menu)').addClass('sub').find('a').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).parent().children('ul').slideToggle();
});

$('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addClass('sub').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu-2').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});

UPDATED FIDDLE

Answer 2

LinkinTED代码中有一点错误 - 他应该将.find('a')添加到代码的第二部分：

$('#main-menu > ul > li > ul > li:has(.dropdown-menu-2)').addClass('sub-sub').find('a').on('click', function(event)....

现在它很完美！谢谢！

单击打开子子菜单

2 个答案: