Javascript 强制accordion关闭所有选项卡

在问这个问题之前，我试图寻找一个解决方案，但不幸的是，我的代码无法找到任何答案

我想强制关闭所有手风琴选项卡，以便用户可以根据自己的喜好打开或关闭

我的代码是：

jQuery(".tap-title").each(function(){
    jQuery(this).click(function() {
        if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
            jQuery(this).parent().find("li:first .tap-title").addClass("active");
            jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
            jQuery(this).toggleClass("active");
            jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
            jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
        }else {
            if (jQuery(this).next().is(":hidden")) {
                jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
                jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
                jQuery(this).toggleClass("active").next().slideDown(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
                jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
            }
        }
        return false;

    });
});

    <div class="col-md-6">
        <div class="title-section text-left">
            <h4 class="bold">Normal Horizontal Tabs</h4>
        </div>      
        <scrip> 
        <div class="accordions-style1">
            <div class="section-content">
                <h4 class="tap-title active"><a href="#">What Is Yamen?<i class="fa fa-minus"></i></a></h4>
                <div class="tap-inner" style="display: block;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
        </div>
    </div>

我的HTML代码是：

jQuery(".tap-title").each(function(){
    jQuery(this).click(function() {
        if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
            jQuery(this).parent().find("li:first .tap-title").addClass("active");
            jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
            jQuery(this).toggleClass("active");
            jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
            jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
        }else {
            if (jQuery(this).next().is(":hidden")) {
                jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
                jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
                jQuery(this).toggleClass("active").next().slideDown(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
                jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
            }
        }
        return false;

    });
});

    <div class="col-md-6">
        <div class="title-section text-left">
            <h4 class="bold">Normal Horizontal Tabs</h4>
        </div>      
        <scrip> 
        <div class="accordions-style1">
            <div class="section-content">
                <h4 class="tap-title active"><a href="#">What Is Yamen?<i class="fa fa-minus"></i></a></h4>
                <div class="tap-inner" style="display: block;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
        </div>
    </div>

正常水平制表符
两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

首先，作为一条友好的建议，您可以将

jquery（）

函数替换为

$（）

，（例如

$（'.tap title'）。每个（function（）{…}；）

第二，虽然我不太理解你的HTML结构，因为你没有在你的问题中提供它，但是从外观上看，你好像在用类来切换手风琴

---

所以我会做一些事情，瞄准.active类，然后移除.active类并将其向上滑动？提供HTML代码会对我有很大帮助，但希望这会有所帮助。

假设您使用的是jquery ui accordion，我相信这会奏效：

$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
    'aria-selected': 'false',
    'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
    'aria-expanded': 'false',
    'aria-hidden': 'true'
 }).hide();

基本手风琴：

HTML:

<div class="accordion">
  <div class="accordion-head">
    title here
  </div>
  <div class="accordion-body">
    content here
  </div>
</div>

.accordion-body{
   display:none;
}

jQuery（或用$（）代替jQuery（））

---

我在@mohamed yousef的帮助下找到了我问题的答案，非常感谢你，伙计

我将jQuery代码替换为以下代码：

jQuery(".tap-title").each(function(){
    jQuery(this).click(function() {
        if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
            jQuery(this).parent().find("li:first .tap-title").addClass("active");
            jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
            jQuery(this).toggleClass("active");
            jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
            jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
        }else {
            if (jQuery(this).next().is(":hidden")) {
                jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
                jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
                jQuery(this).toggleClass("active").next().slideDown(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
                jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
        }else{
                jQuery(this).toggleClass("active").next().slideToggle(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
        }
        }
        return false;
    });
});

并将我的HTML代码替换为以下代码：

    <div class="col-md-6">
        <div class="title-section text-left">
            <h4 class="bold">Normal Horizontal Tabs</h4>
        </div>      
        <scrip> 
        <div class="accordions-style1">
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What Is Yamen?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
        </div>
    </div>

正常水平制表符
两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

两个人在一起，两个人在一起。在elit quis urna Adipising的Vivamus，在neque dictum blandit的Curabitur Vita velit。我的名字是“我的名字”和“我的名字”，我的名字是“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”和“我的名字”。两个人在一起，两个人在一起

哪个手风琴？？手风琴jquery用户界面？？或者你的定制手风琴。。在所有情况下，请提供您的html，让我们知道您的父母和下一步与。。。等用你的代码写一个问题要好得多。我刚刚用我的HTML代码更新了这个问题。我感谢你的帮助：）你还没有回答@Mohamed Yousef关于你使用的手风琴类型的问题。或者包含将html制作成手风琴的javascript代码。很抱歉，我刚刚购买了一个模板，并尝试使用0 javascript经验对其进行自定义：）因此，很遗憾，我不知道手风琴的类型（…tab asa3dak ezay delwa2ty？这个呢？我刚刚用我的HTML代码更新了这个问题。我感谢你的帮助：）我刚刚用我的HTML代码更新了这个问题。我感谢你的帮助：）试试这个：在jquery内部（this）。单击（function（）{…}）；顶部：$（this.parent（）.slideUp（200）；和$（this.removeClass（'active'）；很抱歉，但我不太了解你：）事实上，我刚买了一个模板，并尝试使用0 Javascript背景来定制它。没问题，请检查pastebin中完成的Javascript代码，并让我知道它是如何工作的：）我试图用你提供的代码替换我的代码，但不幸的是，它没有工作。事实上现在我无法打开或关闭选项卡。我只是用HTML代码更新了问题。我感谢你的帮助：）