Question

我终于让我的导航器在点击时显示和隐藏子菜单，但现在发生的事情是，当我点击它，让它滑动时，正在影响它的兄弟姐妹并同时打开和关闭。

我的结构看起来像这样：

<nav>
  <ul>
    <li class="has-children"><a href="#">Home
      <span class="arrow arrow-down"></span>
      </a>
       <ul class="top-menu">
        <li class="has-children"><a href="#">Item1
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>   
        <li class="has-children"><a href="#">Item - 2
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li class="has-children"><a href="#">Item - 3
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul class="submenu">
            <<li><a href="#">SubItem - 1 </a></li>    
            <li><a href="#">SubItem - 2 </a></li>
            <li><a href="#">SubItem - 3</a></li>
            <li><a href="#">SubItem - 4 </a></li>
            <li><a href="#">SubItem - 5 </a></li>
          </ul>
         </li>
        <li><a href="#">Item - 4 </a></li>
        <li><a href="#">Item - 5 </a></li>
      </ul>
    
    </li>    
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这是我的jQuery：

$('.has-children ul').click(function(e){
    e.stopPropagation();
    var el = (event.target || event.srcElement);
    console.log('clicked');
    $(this).find('ul.submenu').slideToggle();
     $(el).find('span').toggleClass('arrow-down arrow-up');
  });

因此，如果我点击带有孩子的班级的li，我所有的子菜单类都会同时打开。也许我做的比我应该做的更多，所有的帮助都会很感激。

Answer 1

尝试此代码（我添加了更多正确的跨度查找）

$ ls -l /etc/hosts
-rw-r--r--    1 root     system        7446 Mar 28 23:03 /etc/hosts 
$

Answer 2

您的事件监听器应位于# sh test.sh World Hello World，并且您只希望在.has-children中使用$.find()

进行深度调整。

$.find('> ul')

$('.has-children').click(function(e) {
  e.stopPropagation();
  var el = (event.target || event.srcElement);
  console.log('clicked');
  $(this).find('> ul').slideToggle();
  $(el).find('span').toggleClass('arrow-down arrow-up');
});

.submenu, .top-menu {
  display: none;
}

Answer 3

点击项时使用此代码切换子项，点击子项时，不会切换项

$('.has-children > a').click(function (e) { e.stopPropagation(); var el = (event.target || event.srcElement); console.log('clicked'); $(this).parent().find('ul.submenu').slideToggle(); $(el).find('span').toggleClass('arrow-down arrow-up'); });

如何从兄弟姐妹中分离点击事件？

3 个答案: