下拉子菜单问题

Dropdown submenu issue

本文关键字：问题 菜单      更新时间：2023-09-26

我的子菜单有问题。

我可以显示子菜单（当我单击菜单或 Li>文本时）。例如，当我点击ONE时显示子菜单

此外，如果此人单击其他菜单（Li> Text），请关闭其他子菜单。例如，如果ONE的子菜单是打开的，而我点击了两个，那么One的子菜单就会关闭。

但是我无法使用当前代码切换来打开/关闭子菜单。例如，如果我单击"一个"，它会显示子菜单。但是我希望如果我再次单击一个，请关闭子菜单。

有人可以帮助我吗？

这是我的代码

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide(); 

    $("li:has(ul)").click(function() {
    $(".menu .expanded .menu ").hide(); 
        $("ul", this).toggle('fast');
    });
});
    </script>
    </head>

    <body>
    <ul class="menu">
        <li class="expanded">One
                <ul class="menu">
                    <li>One 1</li>
                    <li>One 2</li>
                    <li>One 3</li>
                    <li>One 4</li>
                </ul>
            </li>
        <li class="expanded">Two
                <ul class="menu">
                    <li>Two 1</li>
                    <li>Two 2</li>
                    <li>Two 3</li>
                    <li>Two 4</li>
                </ul>
            </li>
        <li class="expanded">Three
                <ul class="menu">
                    <li>Three 1</li>
                    <li>Three 2</li>
                    <li>Three 3</li>
                    <li>Three 4</li>
                </ul>
            </li>
    </ul>
</body>

多谢！我是新:D

我只删除了一行：

$(".menu .expanded .menu ").hide();

您可以在我的代码段中检查这是否是预期的行为

$(document).ready(function() {
  var previousTarget = null;
  $("ul", "li").toggle('fast');
  $("li:has(ul)").click(function() {
    $(".menu .expanded .menu").hide('fast');
            
    if (this === previousTarget && $(this).children().css('display')!='none') {
      $(this).children().hide('fast');
    } else {
      $(this).children().show('fast');
    }
    previousTarget = this;
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <ul class="menu">
        <li class="expanded">One
                <ul class="menu">
                    <li>One 1</li>
                    <li>One 2</li>
                    <li>One 3</li>
                    <li>One 4</li>
                </ul>
            </li>
        <li class="expanded">Two
                <ul class="menu">
                    <li>Two 1</li>
                    <li>Two 2</li>
                    <li>Two 3</li>
                    <li>Two 4</li>
                </ul>
            </li>
        <li class="expanded">Three
                <ul class="menu">
                    <li>Three 1</li>
                    <li>Three 2</li>
                    <li>Three 3</li>
                    <li>Three 4</li>
                </ul>
            </li>
    </ul>
</body>

相关文章：