如何隐藏第二次点击的手风琴选项卡

假设我只需单击一次即可打开手风琴选项卡，并且想要通过第二次单击将其关闭。如何隐藏第二次点击的手风琴选项卡

这是JS/jQuery的我到目前为止有：

var APP = window.APP = window.APP || {}; 

APP.accordion = (function() { 
    var $accordionHeader = $('.accordion__header'); 
    var $accordionContent = $('.accordion__content'); 

    var showAccordionContent = function(e) { 
     var $t = $(this); 

     $accordionHeader.removeClass('accordion__header--active'); 
     $t.addClass('accordion__header--active'); 

     $accordionContent.removeClass('accordion__content--expanded'); 
     $t.next().addClass('accordion__content--expanded'); 

     $('html, body').animate({ 
      scrollTop: $t.offset().top - 60 
     }, 500); 

     e.preventDefault(); 
    }; 

    var bindEventsToUI = function() { 
     $accordionHeader.on('click', showAccordionContent); 
    }; 

    var init = function() { 
     bindEventsToUI(); 
    }; 

    return { 
     init: init 
    }; 

}());

HTML：

<div class="accordion__tab"> 
    <a href="#" class="accordion__header accordion__header--active"> 
     Setting alerts 
     <span class="accordion__arrow"></span> 
    </a> 
    <div class="accordion__content"> 
     <p> 
      {{!-- things --}} 
     </p> 
     <ul class="cf"> 
      <li> 
       {{!-- more things --}} 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="accordion__tab"> 
    <a href="#" class="accordion__header"> 
     Setting alerts 
     <span class="accordion__arrow"></span> 
    </a> 
    <div class="accordion__content"> 
     <p> 
      {{!-- things --}} 
     </p> 
     <ul class="cf"> 
      <li> 
       {{!-- more things --}} 
      </li> 
     </ul> 
    </div> 
</div>

建议？

来源

2017-03-15 NietzscheProgrammer

只需检查该选项卡是否具有“.accordion__content - expanded”附加类。如果是这样，请删除该类和“返回”。另外，在我看来，你的一个类，无论是'active'还是'expanded'都应该做同样的事情，你可以摆脱一个，IMO。活跃应该意味着扩大 –

@RobScott都有不同的目的。展开的是一个元素，另一个元素是活动的。检查html，以便看到我说的内容。 – NietzscheProgrammer

我猜这里缺少的是调用init函数吗？ – Samarth

我会做这样的，只是一些假点

var bindEventsToUI = function() { 
    $accordionHeader.on('click', toggleAccordionContent); 
}; 

var toggleAccordionContent = function (e) { 
    var accordionIsOpen = $(this).classList.indexOf('accordion__header--active') >= 0; // may need to use another selector base on `this` 

    return accordionIsOpen ? hideAccordionContent.call(this) : showAccordionContent.call(this); 
}

来源

2017-03-15 17:27:22 LYu

我猜你正在寻找这一点。修改了showAccordionContent方法逻辑了一下。

希望这是你在找什么。

这个改变现在会关闭已经打开的手风琴，点击它。一旦你点击不活动的手风琴头将打开。在此代码更改后，用户可能会关闭所有手风琴。

var showAccordionContent = function(e) { 
       var $t = $(this); 

       /*Modified block logic*/ 
       if($t.hasClass('accordion__header--active')){ 
        $t.removeClass('accordion__header--active'); 
        $t.next().removeClass('accordion__content--expanded'); 
       }else{ 
        $accordionHeader.removeClass('accordion__header--active'); 
        $accordionContent.removeClass('accordion__content--expanded'); 
        $t.addClass('accordion__header--active'); 
        $t.next().addClass('accordion__content--expanded'); 
       } 


       $('html, body').animate({ 
              scrollTop: $t.offset().top - 60 
             }, 500); 

       e.preventDefault(); 
      };

来源

2017-03-15 18:03:06 Samarth

如何隐藏第二次点击的手风琴选项卡

回答

相关问题