时间戳

首页 > 解决方案 > 如何通过单击打开子菜单并希望它们专门打开？

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

问题描述

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

    $(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>

标签： javascripthtmljquerycsssubmenu

解决方案

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

$(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>

推荐阅读