jquery dropdown without page refresh

Question

i am using the bootstrap dropdown menu. and transitions between pages, I can provide my transitions without refreshing the page, but there is a situation where I get stuck, when the menu a href and submenu a hrefs are clicked, the dropdown remains open, I want it to be closed in an animated way. Finally, when "menu-item-has-children a" is clicked, "display: none" opens and when I click it again, it doesn't close. I couldn't understand why this was happening.

<div class="header__navigation">
    <nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
        <ul class="main-navigation js-main-nav js-dropdown">
            <li class="menu-item">
                <a href="http://localhost/en/index" title="Home" class="list-entry">Home</a>
            </li>
            <li class="menu-item menu-item-has-children">
                <a class="sub-menu-a" href="#">
                    <span class="nav_item_wrap">Corporate</span>
                    <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul role="menu" class="sub-menu" style="display: none;">
                    <li class="menu-item">
                        <a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
                    </li>
                </ul>
            </li>

            <li class="menu-item menu-item-has-children">
                <a class="sub-menu-a" href="#">
                    <span class="nav_item_wrap">Services</span>
                    <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul role="menu" class="sub-menu" style="display: none;">
                    <li class="menu-item">
                        <a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
                    </li>
                </ul>
            </li>

            <li class="menu-item menu-item-has-children">
                <a class="sub-menu-a" href="#">
                    <span class="nav_item_wrap">İmportant İnformation</span>
                    <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
                </a>
                <ul role="menu" class="sub-menu" style="display: none;">
                    <li class="menu-item">
                        <a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item"><a href="http://localhost/en/contact" title="Contact Us" class="list-entry">Contact Us</a></li>
        </ul>
    </nav>
</div>

$(".sub-menu").hide();
$('.menu-item-has-children a').click(function (event) {
    event.preventDefault();
    var elems = $(this).closest('li');
    elems.siblings('li').find('ul').hide();
    if (elems.find('.sub-menu').length) {
        $(this).siblings('.sub-menu', elems).show();
    }
});

 $("li.menu-item").click(function () {
        $('.navbar-collapse').removeClass('in');
    });

$(".menu-item ul li a").click(function () {
        $('.navbar-collapse').removeClass('in');
    });

Answer 1

I think that is just a matter of using .toggle() instead of .show() to be able to close a sub-menu when it is already opened.

$(".sub-menu").hide();
$(".menu-item-has-children a").click(function (event) {
  event.preventDefault();
  var elems = $(this).closest("li");
  elems.siblings("li").find("ul").hide();
  if (elems.find(".sub-menu").length) {
    $(this).siblings(".sub-menu", elems).toggle(); // .toggle() instead of .show() here...
  }
});

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

<div class="header__navigation">
  <nav class="navbar-collapse collapse" id="cargopress-navbar-collapse" aria-expanded="true">
    <ul class="main-navigation js-main-nav js-dropdown">
      <li class="menu-item">
        <a href="http://localhost/en/index" title="Home" class="list-entry">Home</a>
      </li>
      <li class="menu-item menu-item-has-children">
        <a class="sub-menu-a" href="#">
          <span class="nav_item_wrap">Corporate</span>
          <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
        </a>
        <ul role="menu" class="sub-menu" style="display: none;">
          <li class="menu-item">
            <a class="list-entry" href="http://localhost/en/corporate/about-us">ABOUT US</a>
          </li>
        </ul>
      </li>

      <li class="menu-item menu-item-has-children">
        <a class="sub-menu-a" href="#">
          <span class="nav_item_wrap">Services</span>
          <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
        </a>
        <ul role="menu" class="sub-menu" style="display: none;">
          <li class="menu-item">
            <a class="list-entry" href="http://localhost/en/services/land-transportation">LAND TRANSPORTATION</a>
          </li>
        </ul>
      </li>

      <li class="menu-item menu-item-has-children">
        <a class="sub-menu-a" href="#">
          <span class="nav_item_wrap">İmportant İnformation</span>
          <span class="nav_item_down"><i class="fa fa-angle-down"></i></span>
        </a>
        <ul role="menu" class="sub-menu" style="display: none;">
          <li class="menu-item">
            <a class="list-entry" href="http://localhost/en/important-informations/highway">HİGHWAY</a>
          </li>
        </ul>
      </li>
      <li class="menu-item"><a href="http://localhost/en/contact" title="Contact Us" class="list-entry">Contact Us</a></li>
    </ul>
  </nav>
</div>

Edit based on comments.

my pages are running with xhr request

So I now assume that a click on a .list-entry link (link on the second menu level) triggers an xhr to update a part of the page... And that menu stays opened because it is not part of the page that changes.

So you would just need additionnal event handler. Something like:

$(".list-entry").click(function(){
  $(".sub-menu").hide();
})