在选项卡更改时隐藏手风琴

Question

问题：

我有由 jQuery 标签提供支持的标签。选项卡内有手风琴项目，单击时会展开。当我切换到不同的选项卡时，我想隐藏所有活动的（打开的）手风琴div。

管理手风琴行为的当前代码：

var all_spans = $('.accordion-item-text').hide();

$('.accordion-item h3').click(function(e){
    $('.accordion-item h3').removeClass('active');
    $(this).toggleClass('active');
    var thisSpan = $(this).parent().find('.accordion-item-text'),
        isShowing = thisSpan.is(":visible");

    all_spans.hide(500);
    if (!isShowing) {
        thisSpan.slideToggle();
    }
    e.preventDefault();
});

应该管理选项卡更改和隐藏所有打开的手风琴元素的当前代码：

所以，我认为一个简单的点击功能就可以做到，但显然我错了。

$('.ui-tab').click(function() {
    $('.accordion-item h3').removeClass('active');
    $('.accordion-item-text').hide(500);
});

这根本行不通，我必须先搜索那个确切的 div 吗？欢迎提出任何建议。

当前HTML部分：

<div class="product_content">
    <div id="tabs">

      <ul class="clearfix">
        <li><a href="#tabs-0">About</a></li>
        <li><a href="#tabs-1">General specifications</a></li>
      </ul>

      <div id="tabs-0" class="tabcontent"> 

          <div class="accordion_wrap">
            <div class="accordion-item">
              <h3>Accordion label</h3>
                <div class="accordion-item-text">accordion content</div>
            </div>
          </div>

          <div class="accordion_wrap">
            <div class="accordion-item">
              <h3>Accordion label</h3>
                <div class="accordion-item-text">accordion content</div>
            </div>
          </div>

      </div>

      <div id="tabs-1" class="tabcontent">                                
          <div class="accordion_wrap">
            <div class="accordion-item">
              <h3>Accordion label</h3>
                <div class="accordion-item-text">accordion content</div>
            </div>
          </div>
      </div>

    </div>
</div>

Answer 1

所以，我找到了解决办法。我不知道为什么我以前的功能不起作用，但在睡过头之后我阅读了 jQuery UI 文档并发现我可以使用我的常规选项卡触发功能。

$("#tabs").tabs({
    activate: function(event, ui) {

        $('.accordion-item h3').removeClass('active');
        $('.accordion-item-text').hide(500);

    }
});

在选项卡更改时隐藏手风琴

Hide accordion on tab change

javascript

jquery

jquery-ui

jquery-ui-tabs