jquery slideToggle（）不适用于toggleClass答案

【问题标题】：jquery slideToggle() not working with toggleClassjquery slideToggle（）不适用于toggleClass
【发布时间】：2020-10-07 20:00:44
【问题描述】：

我想用 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();

});

我不确定我做错了什么。你能帮我吗？谢谢

【问题讨论】：

切换类对<a href="link_url">text<a>工作正常
请告诉我我该怎么做
你链接jQuery了吗
是的 jquery 已经链接了
您的控制台有错误吗？

标签： javascript jquery

【解决方案1】：

您的代码中有一个基本错误。

关闭锚标记，两端都有一个开始锚标记。
然后使用逻辑得到你的结果，看例子，如果需要什么，请告诉我
添加子项 Achor 或 li text，这取决于您的要求，但对于 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>

【讨论】：

你是superv，你明白了我的意思，按照提示给出了解决方案。菜单项单击并转到 url 仍然存在问题。我想阻止他们不去网址
但是是的，我已经添加了条件，现在效果很好

【解决方案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();
});

更改移除类的顺序，然后跳过当前元素。

【讨论】：