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 - CheckboxInputElement.onChange 事件未触发

javascript - 如果标签已经存在,如何防止插入标签?

javascript - 我怎样才能阻止链接将我发送到页面顶部

jquery - 右侧 Accordion 的响应式垂直标签

javascript - 单击时从特定 <li> 标记填充表单

javascript - 从 JavaScript 中的链接获取经度/纬度

javascript - 用 Javascript 或 jQuery 替换甚至更好地删除内联样式?

javascript - 使用 jquery 错误更新 JSON

javascript - 单标签多内容 Bootstrap 4

javascript - anchor 和提交按钮按下事件不起作用