jQuery 手风琴 - OnCollapse 和 OnExpand 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9292585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery accordion - OnCollapse and OnExpand events
提问by DS_web_developer
I have an accordion with single title like this
我有一个这样的单标题手风琴
<div class="accordion" id="accordion_acquired_services">
<h3><a href="#">Acquired services</a></h3>
<table id="tbl_acquired_services">
<tbody></tbody>
</table>
</div>
What I'd like is to bind an event on accordion open and accordion close...
我想要的是在手风琴打开和手风琴关闭时绑定一个事件......
Actually what I'd like to achieve is to do an ajax request that would populate the accordion's content each time it is expanded...
实际上我想要实现的是做一个ajax请求，每次扩展时都会填充手风琴的内容......
oddly enough there is no onExpand/onCollapse events
奇怪的是没有 onExpand/onCollapse 事件
so far I have this
到目前为止我有这个
$( "#accordion_acquired_services" ).bind( "accordionchange", function(event, ui) {
$('#tbl_acquired_services').html('');
//trigger ajax
});
But that triggers on both occasions, when it is collapsed and when it is expanded... how do I know which is which?
但这在两种情况下都会触发，当它折叠时和当它展开时......我怎么知道哪个是哪个？
采纳答案by DS_web_developer
Try this solution:
试试这个解决方案：
var opened = $(this).find('.ui-state-active').length;
回答by Toydor
Time changes and so is jquery. Copy/paste from thread
时间在变化，jquery 也在变化。从线程复制/粘贴
$("#accordion").accordion({ activate: function(event, ui) {
alert(ui.newHeader.text());
}
});
another event:
另一个事件：
$("#accordion").accordion({ beforeActivate: function(event, ui) {
alert(ui.newHeader.text());
}
});
take a look at jQuerys docsfor more details
查看 jQuerys 文档以获取更多详细信息
回答by Shivachandra
There are 2 codes here to notice
这里有2个代码要注意
1.Show 2.Shown 3.Hide 4.Hidden
1.显示 2.显示 3.隐藏 4.隐藏
So the code goes as below
所以代码如下
$('#accordion').on('show.bs.collapse', function () {
//on clicking the accordion menu
});
$('#accordion').on('hide.bs.collapse', function () {
//on clicking the accordion menu
});
So now if we use Hidden and Shown we can trigger after the accordion menu content closes or open up completely
所以现在如果我们使用隐藏和显示我们可以在手风琴菜单内容关闭或完全打开后触发
$('#accordion').on('shown.bs.collapse', function () {
//after menu opens
});
$('#accordion').on('hidden.bs.collapse', function () {
//after menu closes
});
回答by Anderson Pimentel
You can use the changeevent and the activeoption. Like this:
您可以使用change事件和active选项。像这样：
$('#accordion').bind('accordionchange',
function() {
alert('Active tab index: ' + $(this).accordion('option', 'active'))
});
回答by Francois Lemieux
I know it's a old thread but this really helped me
我知道这是一个旧线程，但这确实帮助了我
$( "#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
}
}
}
}
});
Doing this check if there is a new header object which is not generated when you close an accordion only when you open one.
这样做会检查是否有一个新的标题对象，只有在您打开手风琴时才关闭该标题对象。
回答by Aaron Belchamber
According to this SO post, jQuery doesn't expose the changes the same way as above. This is a script I wrote that works with the most recent jQuery library that will grab the accordion's ID upon open and update the URL with that hash.
根据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){}
}
});
