javascript - jQuery下拉菜单切换问题

标签 javascript jquery html

当我单击“打开”时,它会切换所有子菜单。我只想切换 li 下的确切 ul

$(document).ready(function(){
    $(".has-children>a").click(function(event){
        event.preventDefault();
    });
    $('.has-children').click(function() {
        $(this).find('>ul').toggle(300);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li class="has-children">
    <a href="#">open</a>
        <ul class="submenu" style="display:none">
            <li class="has-children">
            <a href="#">open</a>
                <ul class="submenu" style="display:none">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

最佳答案

您可以通过将 find() 更改为 children() 以仅定位 li 的直接子级来实现此目的。

$(document).ready(function(){
    $(".has-children>a").click(function(event){
        event.preventDefault();
    });
    $('.has-children').click(function() {
        $(this).children('ul').toggle(300);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li class="has-children">
    <a href="#">open</a>
        <ul class="submenu" style="display:none">
            <li class="has-children">
            <a href="#">open</a>
                <ul class="submenu" style="display:none">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

然而,这会导致一个问题,即单击子级的子级将关闭菜单,因此您可以使用 a 标签和 jQuery next() 函数进行切换children()find() 如下所示:

$(document).ready(function() {
  $(".has-children>a").click(function(event) {
    event.preventDefault();
    $(this).next().toggle(300);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="has-children">
    <a href="#">open</a>
    <ul class="submenu" style="display:none">
      <li class="has-children">
        <a href="#">open</a>
        <ul class="submenu" style="display:none">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
    </ul>

  </li>
</ul>

这也会使您的脚本变得更短。

关于javascript - jQuery下拉菜单切换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48336897/

相关文章:

JavaScript 作用域和提升 : code returns 1 instead of 10 as expected

javascript - devtool 扩展面板中的免费搜索文本

javascript - jQuery 'unique' 在 Safari 中不返回实际的唯一值

javascript - 为什么 jQuery spritely 动画在第二个 mouseenter 上播放额外的帧?

javascript - 西西弗斯自动保存网页表单不起作用

html - CSS Footer 不会向下移动到页面底部

javascript - 用于跨度内跨度的 CSS 或 jQuery 选择器

sublime text 中的 JavaScript 语法丢失了吗?

jquery - Kendo 组合框 - jQuery val() 不触发 View 模型值更改

javascript - DOM 循环中的 HTML5 Canvas