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

Posted 2023-05-08

【中文标题】在选项卡更改时隐藏手风琴

【英文标题】：Hide accordion on tab change

【发布时间】：2017-04-07 11:15:15

【问题描述】：

问题：

我有由 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> 

【问题讨论】：

请提供您的标记

您能添加您的 html 部分吗？以便我们对这个问题有更多的了解。

【参考方案1】：

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

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

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

    
);