Javascript 在accordion中使用toggleClass（）而不是addClass（）/removeClass（）

晚上好！我使用addClass（）/removeClass（）方法实现手风琴功能。有： 1.HTML

3.JS

但我认为我可以使用toggleClass（）而不是og addClass（）和removeClass（）对其进行转换。你能帮助我吗？但不要创建新的手风琴-只转换现有的手风琴

---

谢谢

如果。。else使用

.toggleClass（）

之类的代码块，确保同时使用

$text.removeClass（'active'）

以便删除

.text

元素上的任何

活动类

更多解释请参见下面的代码注释


/*我已经重构了你的JS*/
（功能手风琴（$）{
//不缓存变量，因为它们只使用一次
$（'.title'）。在（'click'，function（）上{
//不需要最接近和查找，简单。next（）在这里就足够了
var$currentText=$（this.next（）；
//将if..else替换为以下行
/*添加此选项可删除您需要的所有活动类
如前所述，如果您是
精细保持多个下拉列表处于活动状态*/
$（'.text'）.not（$currentText.removeClass（'active'）；
/*在这里，我们切换活动类*/
$currentText.toggleClass（'active'）；
});
})（jQuery）//将jQuery传递给iife函数
ul{
列表样式：无；
}
.手风琴包装.标题{
边框：1px实心#0f0f；
背景:#中交;；
字体大小：14px；
利润率：0 10px 0 10px；
填充：6px 8px；
光标：指针；
}
.手风琴包装器.文本{
显示：无；
字体大小：12px；
填充：8px 16px；
文本对齐：对齐；
}
.手风琴包装器。激活{
显示：块；
}
.功能{
字体大小：16px；
利润率：12px 8px；
填充：6px 8px；
}

手风琴


标题
描述


标题
描述


标题
描述


您只需在
.title
上切换
.active
，然后使用CSS同级选择器切换
.text


（函数（$）{
$（函数（）{
功能手风琴（）{
变量$clicked=$（“.title”）；
变量$text=$（“.text”）；
$clicked.click（函数（）{
$clicked.not（$（this））.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
}
手风琴（）；
});
})（jQuery）
ul{
列表样式：无；
}
.手风琴包装.标题{
边框：1px实心#0f0f；
背景:#中交;；
字体大小：14px；
利润率：0 10px 0 10px；
填充：6px 8px；
光标：指针；
}
.手风琴包装器.文本{
显示：无；
字体大小：12px；
填充：8px 16px；
文本对齐：对齐；
}
.active+文本{
显示：块；
}
.功能{
字体大小：16px；
利润率：12px 8px；
填充：6px 8px；
}

手风琴


标题
描述


标题
描述


标题
描述


这不是我所需要的。例如我通过点击标题回复此描述打开描述。但当我再次点击这个标题时，描述并没有隐藏。我需要实施它。有什么想法吗？@Antiju啊，小问题，会解决的，谢谢！太好了！“你认为它可以用另一种方式实现吗？”@Antiju是的，我可以将你的代码重构到一个更大的范围内。当我被其他人点击时，它不会隐藏描述title@AntinJu啊，对不起，我错过了那部分。更新。
<div class="container">
    <div class="functionality">Accordion</div>
    <ul class="accordion-wrapper">
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
        <li>
            <div class="title">Title</div>
            <div class="text">Description</div>
        </li>
    </ul>
</div>

ul {
    list-style: none;
}

.accordion-wrapper .title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 14px;
    margin: 0 10px 0 10px;
    padding: 6px 8px;
    cursor: pointer;
}

.accordion-wrapper .text {
    display: none;
    font-size: 12px;
    padding: 8px 16px;
    text-align: justify;
}

.accordion-wrapper .active {
    display: block;
}

.functionality {
    font-size: 16px;
    margin: 12px 8px;
    padding: 6px 8px;
}

(function($) {
    $(function() {
        function accordion() {
            var $clicked = $('.title');
            var $text = $('.text');

            $clicked.click(function() {
                var $instance = $(this);
                var $currentText = $instance.closest('li').find('.text');
                if ($currentText.hasClass('active')) {
                    $currentText.removeClass('active');
                } else {
                    $text.removeClass('active');
                    $currentText.addClass('active');
                }
            });
        }
        accordion();
    });

})(jQuery);