I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?

this is the HTML code

  <div >
     <div >
         <ul>
            <li >
               <a  href="#"><i ></i><span data-i18n="" >User Manangement</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                   <ul>
                      <li ><a href="~/admin/users/index">*&nbsp;Users List</a></li>
                            <li > <a href="~/admin/users/Create" >*&nbsp;Register New User *</a></li>
                        </ul>
                    </li>                       
                    <li >
                        <a  href="#"><i ></i><span data-i18n="" >Categories</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li ><a href="~/admin/categories/" >*&nbsp;Category List</a></li>
                            <li ><a href="~/admin/categories/addnewcategory" >*&nbsp;New category</a></li>
                        </ul>
                    </li>
                    <li >
                        <a  href="#"><i ></i><span data-i18n="" > Products</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li ><a href="~/admin/products/" >*&nbsp;Products List</a></li>
                            <li > <a href="~/admin/products/addnewproduct" >*&nbsp;New Product </a></li>
                        </ul>
                    </li>
                   <li >
                        <a  href="#"><i ></i><span data-i18n="" > Orders</span>&nbsp;<span class='fa fa-caret-down right'></span></a>
                        <ul>
                            <li ><a href="~/admin/Orders/" >*&nbsp;Orders List</a></li>
                            
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

This is js:

  <script>
    $('.sub-menu ul').hide();
    $(".sub-menu a").click(function () {
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
</script>

and this is CSS:

  .menu-layout .first-level {
    margin-bottom: 9px;
    border-radius: 5%;
    padding: 2px 10px 2px 10px;
    line-height: 15px;
}

.second-level {
    margin-bottom: 9px;       
    padding: 2px 50px 2px 10px;
    line-height: 15px;
}

    .menu-layout li a {
        color: white !important;
        font-size: 13px;
    }

        .menu-layout li a i {
            color: white;
            padding-left: 10px
        }


.sidebar {
    position: fixed;
    top: 1px;
    width: 250px;
    height: calc(100% - 1px);
    border-bottom-left-radius: 20px;
    transition: all 0.3s ease;
    background-color:black;
    font-family: IRANSans;
    font-weight: 400;
}

CodePudding user response：

Here you go...

Just change this...

$(document).ready(function () {
    $(".sub-menu ul").hide();
    $(".sub-menu a").click(function () {
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
});

...to this.

$(document).ready(function () {
    $(".sub-menu ul").hide();
    $(".sub-menu a").click(function () {
        $(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
        $(this).parent(".sub-menu").children("ul").slideToggle("100");
        $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
    });
});

$(document).ready(function() {
  $(".sub-menu ul").hide();
  $(".sub-menu a").click(function() {
    $(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
  });
});

.menu-layout .first-level {
  margin-bottom: 9px;
  border-radius: 5%;
  padding: 2px 10px 2px 10px;
  line-height: 15px;
}

.second-level {
  margin-bottom: 9px;
  padding: 2px 50px 2px 10px;
  line-height: 15px;
}

.menu-layout li a {
  color: white !important;
  font-size: 13px;
}

.menu-layout li a i {
  color: white;
  padding-left: 10px
}

.sidebar {
  position: fixed;
  top: 1px;
  width: 250px;
  height: calc(100% - 1px);
  border-bottom-left-radius: 20px;
  transition: all 0.3s ease;
  background-color: black;
  font-family: IRANSans;
  font-weight: 400;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

  <div >
    <div >
      <ul>
        <li >
          <a  href="#"><i ></i><span data-i18n="" >User Manangement</span>&nbsp;<span ></span></a>
          <ul>
            <li ><a href="~/admin/users/index">*&nbsp;Users List</a></li>
            <li > <a href="~/admin/users/Create" >*&nbsp;Register New User *</a></li>
          </ul>
        </li>
        <li >
          <a  href="#"><i ></i><span data-i18n="" >Categories</span>&nbsp;<span ></span></a>
          <ul>
            <li ><a href="~/admin/categories/" >*&nbsp;Category List</a></li>
            <li ><a href="~/admin/categories/addnewcategory" >*&nbsp;New category</a></li>
          </ul>
        </li>
        <li >
          <a  href="#"><i ></i><span data-i18n="" > Products</span>&nbsp;<span ></span></a>
          <ul>
            <li ><a href="~/admin/products/" >*&nbsp;Products List</a></li>
            <li > <a href="~/admin/products/addnewproduct" >*&nbsp;New Product </a></li>
          </ul>
        </li>
        <li >
          <a  href="#"><i ></i><span data-i18n="" > Orders</span>&nbsp;<span ></span></a>
          <ul>
            <li ><a href="~/admin/Orders/" >*&nbsp;Orders List</a></li>

          </ul>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>