jquery slideToggle() не работает с переключаемым классом

#javascript #jquery

Вопрос:

Я хотел переключать пункты меню с помощью toggleclass, .opened класс должен быть добавлен и удален для пунктов меню. Это работает для меня, когда я переключаю другой пункт меню, но для того же пункта меню, когда я нажимаю на это, .opened класс не удаляется вот мой код

Тег меню Html

 <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

 $('.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();

});

Я не уверен, что я делаю неправильно. Можете ли вы, пожалуйста, помочь мне в этом?
Спасибо

1. класс переключения работает нормально для <a href="link_url">text<a>

2. пожалуйста, подскажите мне, что я могу для этого сделать

3. вы связали jQuery

4. да, jquery подключился

5. У вас есть какие-либо ошибки в вашей консоли?

Ответ №1:

В вашем коде есть основная ошибка.

Закройте теги привязки, у вас есть открывающий тег привязки на обоих концах.
затем используйте логику, чтобы получить свой результат, см. Пример, если нужно что-нибудь еще, пожалуйста, дайте мне знать
Добавьте подпункты или текст li, это зависит от ваших требований, но для UX вы должны добавить текст, чтобы пользователи могли понять, что есть еще какой-то контент для просмотра.

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

1. вы супервайзер, вы поняли мою точку зрения, дали решение в соответствии с запросом. По-прежнему возникают проблемы, когда пункты меню щелкают и переходят на URL. Я хочу, чтобы они не переходили на url

2. Но да, я добавил условие, теперь это работает хорошо

Ответ №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();
});

Измените порядок удаления классов, затем пропустите текущий элемент.