Question

我有一个像这样的单一标题的手风琴

<div class="accordion" id="accordion_acquired_services">
    <h3><a href="#">Acquired services</a></h3>
    <table id="tbl_acquired_services">
        <tbody></tbody>
    </table>
</div>

我想要的是将手风琴开放和手风琴结束的活动结合起来......

实际上我想要达到的目的是做一个ajax请求，每次扩展时都会填充手风琴的内容......

奇怪的是，没有onExpand / onCollapse事件

到目前为止，我有这个

$( "#accordion_acquired_services" ).bind( "accordionchange", function(event, ui) {   
    $('#tbl_acquired_services').html('');
    //trigger ajax
});

但是这种情况会在两种情况下触发，当它崩溃并且展开时......我怎么知道哪个是哪个？

Answer 1

时间变化，jquery也是如此。复制/粘贴thread

$("#accordion").accordion({ activate: function(event, ui) {
          alert(ui.newHeader.text());
  }
});

另一个事件：

   $("#accordion").accordion({ beforeActivate: function(event, ui) {
        alert(ui.newHeader.text());         
     }
  });

take a look at jQuerys docs了解更多详情

Answer 2

此处有2个代码需要注意

1.Show 2.Shown 3.Hide 4.Hidden

所以代码如下

$('#accordion').on('show.bs.collapse', function () {
 //on clicking the accordion menu
});

$('#accordion').on('hide.bs.collapse', function () {
 //on clicking the accordion menu
});

所以现在如果我们使用Hidden and Shown，我们可以在手风琴菜单内容关闭或完全打开后触发

$('#accordion').on('shown.bs.collapse', function () {
 //after menu opens
});

$('#accordion').on('hidden.bs.collapse', function () {
 //after menu closes
});

Answer 3

您可以使用change事件和active选项。像这样：

$('#accordion').bind('accordionchange', 
    function() {
         alert('Active tab index: ' + $(this).accordion('option', 'active'))
    });

Answer 4

试试这个解决方案：

var opened = $(this).find('.ui-state-active').length;

Answer 5

根据this SO post，jQuery没有像上面那样公开更改。这是我编写的一个脚本，它与最新的jQuery库一起使用，该库将在打开时获取手风琴的ID并使用该哈希更新URL。

$(accordionSelText).accordion({
        activate: function(event, ui) {

            var accordionId=ui.newHeader.closest('.accordion').attr('id');  // Grabs the id of the accordion

            try {
                    if (accordionId) {
                        window.location.hash = accordionId;
                        console.log('Active accordion index: ' + accordionId);
                    }
            }catch(e){}
        }
    });

Answer 6

我知道这是一个旧线程，但这确实帮助了我

$( "#Accordion" ).accordion({
collapsible: true,
heightStyle: "content",
activate: function(event, ui) {

  if(ui.newHeader[0]){

    if( ui.newHeader[0].id =='ID of h3'){
        // run code here
      }
    }

  }

 }
});

进行此检查是否只有在打开手风琴时才生成一个新的标题对象。

jQuery手风琴 - On Collapse和Expand事件

6 个答案: