在标签更改上隐藏手风琴

时间:2016-11-23 12:27:13

标签: javascript jquery jquery-ui jquery-ui-tabs

问题:

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

1 个答案:

答案 0 :(得分:0)

所以,我找到了解决方案。 我不确切地知道为什么我以前的功能不起作用但是在睡觉之后我读了jQuery UI文档并发现我可以使用我的常规标签fire功能。

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

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

    }
});