限制children拉入jQuery函数

Question

我对某些编码语言非常陌生，我正在努力自学。经过一些研究，我通常能够解决我的问题，但我真的被困住了。我有一个响应式导航系统，它的子菜单是用 jquery 构建的，但在响应式视图上，只有子菜单的按钮会展开子部分。

现有代码：

cssmenu.find('li ul').parent().addClass('has-sub');

multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

我试了一下，但是当我进行以下更改时，opening/closing 子菜单会关闭 parent 菜单。

cssmenu.find('li ul').parent().addClass('has-sub');

multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').parent().on('click', function() {
            $(this).children('.submenu-button').toggleClass('submenu-opened');
            if ($(this).children('ul').hasClass('open')) {
              $(this).children('ul').removeClass('open').hide();
            }
            else {
              $(this).children('ul').addClass('open').show();
            }
          });
        };

我想我的问题是如何限制切换函数调用的 children 元素？还是我把这一切完全搞砸了？任何帮助或指出正确的方向都会非常有帮助！谢谢！

PS，导航的HTML：

<div id="cssmenu" class="align-right mobile-align-center">
<ul>
   <li><a href="link">Home</a></li>

   <li><a href="#">About</a>
      <ul>
         <li><a href="#">About The Org</a></li>
         <li><a href="link">Leadership</a></li>
         <li><a href="link">FAQs</a></li>
      </ul>
   </li>

   <li><a href="#">Divisions</a>
      <ul>
        <li><a href="#">Division 1</a>
         <ul>
         <li><a href="link">D1, Branch 1</a></li>
         <li><a href="link">D1, Branch 2</a></li>
         <li><a href="link">D1, Branch 3</a></li>
         </ul>
        </li>
        <li><a href="#">Division 2</a>
        <ul>
         <li><a href="link">D2, Branch 1</a></li>
         <li><a href="link">D2, Branch 2</a></li>
         </ul>
         </li>
      </ul>
   </li>   

   <li><a href="link">Contact</a></li>
</ul>
</div>

Answer 1

你的第二个代码就差不多了，除了点击向上传播，从而触发对父菜单项的点击。

使用 console.log 总是一个好主意。您会看到单击子项会在控制台中触发 2 条消息：https://jsfiddle.net/7r729q5r/2/

要停止该行为，请使用 stopPropagation():

   cssmenu.find('.submenu-button').parent().on('click', function(event) {
      event.stopPropagation();

参见 https://jsfiddle.net/7r729q5r/3/

上的第 36 行

此外，您的 css 第 230 行存在错误，导致菜单在某些宽度上消失。

限制children拉入jQuery函数

Limit children pulled in jQuery function

javascript

navigation

jquery