強制手風琴關閉所有標簽

Question

在嘗試問這個問題之前，我試圖尋找一種解決方案，但是不幸的是，我的代碼找不到任何答案！

我想強制關閉所有手風琴標簽，以便用戶可以按自己的意願打開或關閉。

我的代碼是：

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;

    });
});

我的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 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>

Answer 1

我在@ 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>

Answer 2

首先，作為一條友好的建議，您可以用$()代替jquery()函數（例如$('.tap-title').each(function(){...});)

第二，雖然我不十分了解您的HTML結構，因為您沒有向其提供問題，但從外觀上看，似乎您在切換手風琴類？

因此，我將針對.active類，然后移除自身的.active類並將其向上滑動，從而做些什么？ 提供HTML代碼對我有很大幫助，但是希望對您有所幫助。

Answer 3

假設您正在使用jquery-ui手風琴，我相信這會起作用：

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

Answer 4

基本手風琴：

HTML：

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

CSS：

.accordion-body{
   display:none;
}

jQuery （或$（）而不是jQuery（））

jQuery(document).ready(function(){

  var items = jQuery('.accordion');
  var heads = items.find('.accordion-head);


  heads.click(function(){

     var i = jQuery(this);

     items.find('.accordion-body').slideUp(); // close all accordions
     i.next('.accordion-body').slideDown();


  });

});