如何通过单击打开子菜单并希望它们专门打开？答案

【问题标题】：How can I open submenu by click and I want them to open specifically?如何通过单击打开子菜单并希望它们专门打开？
【发布时间】：2021-12-07 17:33:05
【问题描述】：

我正在使用这个代码：我把 html,css,jquery 当我单击 li 时，我想打开它的子菜单，但所有子菜单都在打开，我想专门为每个项目打开子菜单。有人可以帮我吗？

    $(document).ready(function () {
        $(".menuitem li").click(function(){
             $('.submenu').slideToggle();
          });
    });

ul.submenu {
    position: relative;
}
.menuitem li{
    position: relative;
}
.submenu li{
    position: relative;
}

 <div class="mobileMenu">
                <ul class="menuitem">
                    <li ><a href=" " >آموزش </a>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                        <ul class="submenu">
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                        </ul>
                        </li>
                        <li ><a href=" " >پژوهش</a>
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                        <ul class="submenu">
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                        </ul>
                        </li>
                        <li  ><a href=" " >معاونت ها</a>
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                            <ul class="submenu">
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                            </ul>
                        </li>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【问题讨论】：

标签： javascript html jquery css submenu

【解决方案1】：

在您的 jQuery 代码中，您没有指定打开 one 子菜单。因此，它将打开所有子菜单。

$(function() {
    $('.menuitem li').click(function(e) {
        e.stopPropagation();
        var $el = $('ul',this);
        $('.menuitem > li > ul').not($el).slideUp();
        $el.stop(true, true).slideToggle(400);
    });
});

ul.submenu {
    position: relative;
}
.menuitem li {
    position: relative;
}
.submenu li {
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="mobileMenu">
    <ul class="menuitem">
        <li>
            <a href=" ">آموزش </a>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            <ul class="submenu">
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
            </ul>
        </li>
        <li>
            <a href=" ">پژوهش</a>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            <ul class="submenu">
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
            </ul>
        </li>
        <li>
            <a href=" ">معاونت ها</a>
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            <ul class="submenu">
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
                <li><a href=" " target="_blank">زیر منو</a></li>
            </ul>
        </li>
    </ul>
</div>

【讨论】：

谢谢，但它不起作用
@BaharSlms 你想点击打开它的子菜单吗？这是一个代码 sn-p 我们可以清楚地看到点击 li 它只是打开它是一个子菜单，而不是所有菜单。

【解决方案2】：

单击时，您必须获取菜单的子元素，然后在其上滑动切换。用这个替换你的 jquery 代码

$(".menuitem li").click(function(){
         $(this).children().find('li').slideToggle();
      });

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(document).ready(function () {
        $(".menuitem li").click(function(){
             $(this).children().find('li').slideToggle();
          });
    });
</script>
<style>
ul.submenu {
    position: relative;
}
.menuitem li{
    position: relative;
}
.submenu li{
    position: relative;
}
</style>
</head>
<body>

 <div class="mobileMenu">
                <ul class="menuitem">
                    <li ><a href=" " >آموزش </a>
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                        <ul class="submenu">
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                        </ul>
                        </li>
                        <li ><a href=" " >پژوهش</a>
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                        <ul class="submenu">
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                            <li><a href=" " target="_blank">زیر منو</a></li>
                        </ul>
                        </li>
                        <li  ><a href=" " >معاونت ها</a>
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                            <ul class="submenu">
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                                <li><a href=" " target="_blank">زیر منو</a></li>
                            </ul>
                        </li>
                       
</body>
</html>

【讨论】：

是的，谢谢我尝试使用它，但它不起作用
当我检查它是否工作正常时，您遇到了什么问题。
当我把这段代码放到我的 jQuery 中时，子菜单根本打不开
你必须替换你的 $(".menuitem li").click(function(){ $('.submenu').slideToggle(); });此代码带有 $(".menuitem li").click(function(){ $(this).children().find('li').slideToggle(); });这样它就会起作用，你必须做错事。