How can I open submenu by click and I want them to open specifically?-CodePudding

I'm using this code: I put html,css,jquery when i click on li i want to open its submenu but all the submenus are opening and i want to open the submenus specifically for each item. Can someone help me with it?

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

CodePudding user response：

In your jQuery code, you didn't specify to open one submenu. Therefore, it'll open all submenus.

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

CodePudding user response：

on click, you have to get the child element of menu then slideToggle on it.

<!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>