jquery slideToggle() not working with toggleClass

Question

I wanted to slideToggle menu items with toggleclass, .opened class should be added and removed for menu items. This is working for me when I toggle different menu item but for same menu item when I click this, .opened class won't get removed here is my code

Html menu tag

<ul id="menu-main-menu">
<li class="menu-item"><a href="link_url">text<a>
   <ul class="sub-menu">
     <li class="menu-item">
        <ul class="sub-menu">
           <li class="menu-item"><a href="link_url">second sub item<a></li>
        </ul>
     </li>
     <li class="menu-item"><a href="link_url">first sub item<a></li>
     <li class="menu-item"><a href="link_url">first sub item<a></li>
   </ul>
  </li>
 <li class="menu-item"><a href="link_url">text<a></li>
</ul>

jquery code

$('.menu-item').on('click', function(e) {
    $('.menu-item').removeClass('opened')
    $(this).toggleClass('opened');
    if ($('.sub-menu', this).length >=1) {
                e.preventDefault();
            }
    $(this).children('ul').slideToggle('fast');
    $(this).siblings('li').find('ul').hide('slow')
    e.stopPropagation();

});

I am not sure what I am doing wrong. Can you please help me for this? Thanks

Answer 1

There is a basic mistake in your code.

1. Close Anchor tags, you have an opening anchor tag on both the ends.
2. then use the logic to get your result, see the example, If need anything else, please let me know
3. Add sub items Achor or li text, that depends on your requirement, but for UX you should add some text so users can get that there is still some more content to see.

$('.menu-item').click(function(e){
        $(this).siblings().find('> .sub-menu').slideUp();
        $(this).find('> .sub-menu').slideToggle();
        $(this).siblings().removeClass('opened');
        $(this).toggleClass('opened');
        e.stopPropagation();
    });

.sub-menu {
            display: none;
        }
        .menu-item a{
            display: inline-block;
            margin-bottom: 10px;
            
        }
        .menu-item {
            margin-bottom: 10px;
        }
        .menu-item.hasSubmenu {
            border-bottom: 1px solid;
        }
        .menu-item a {
            background-color: red;
            color: white;
        }
        .hasSubmenu {
            position: relative;
        }
        .hasSubmenu:after {
            position: absolute;
            right: 10px;
            top: 0px;
            content: "+";
            display: block;
            font-size: 20px;
            font-weight: bold;
        }
        .hasSubmenu.opened:after {
            content: "-";
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <ul id="menu-main-menu">
        <li class="menu-item hasSubmenu">
            <a href="link_url">text</a>
            <ul class="sub-menu">
                <li class="menu-item hasSubmenu">
                    <a href="">First level</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="link_url">second sub item</a></li>
                         <li class="menu-item"><a href="link_url">second sub item</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="link_url">first sub item</a></li>
                <li class="menu-item"><a href="link_url">first sub item</a></li>
            </ul>
        </li>
        <li class="menu-item hasSubmenu">
            <a href="link_url">text</a>
                <ul class="sub-menu">
                <li class="menu-item hasSubmenu">
                    <a href="">First level</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="link_url">second sub item</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="link_url">first sub item</a></li>
                <li class="menu-item"><a href="link_url">first sub item</a></li>
            </ul>
        </li>
    </ul>

Answer 2

$('.menu-item').on('click', function(e) {

  $(this).toggleClass('opened');
  $('.menu-item').not($(this)).removeClass('opened');
  
  if ($('.sub-menu', this).length >= 1) {
    e.preventDefault();
  }
  $(this).children('ul').slideToggle('fast');
  $(this).siblings('li').find('ul').hide('slow')
  e.stopPropagation();
});

Change the order of removing classes, then skip the current element.