检测 jquery-ui 手风琴打开/关闭状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9543591/
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
Detecting jquery-ui accordion open / close state
提问by Josh Scott
How do I conditionally handle when an accordion section is open. What I am asking is this (in pseudo code):
当手风琴部分打开时，我如何有条件地处理。我要问的是这个（伪代码）：
if (this-accordion-section-open){
do something
}
else {
do something else
}
I am looking for something like :isvisible.
我正在寻找类似 :isvisible 的东西。
Thanks for your help.
谢谢你的帮助。
回答by Chamika Sandamal
following code return you the active panel,
以下代码返回活动面板，
var active = $( ".selector" ).accordion( "option", "active" );
回答by marko
from the demo site, I noticed there's a ui-state-activeclass on opened section. So you can use jQuery.hasClassfor your code...
从演示站点，我注意到ui-state-active打开部分有一个类。所以你可以使用jQuery.hasClass作为你的代码......
回答by heads5150
The basic HTML structure of the accordion is:
手风琴的基本 HTML 结构是：
<h3>
<a>...</a>
</h3>
The way I have done it in the past is to assign a class to the tag like so:
我过去的做法是为标签分配一个类，如下所示：
<h3>
<a class="my_accordion">...</a>
</h3>
jQuery UI assigns different classes to the tag based on its state.
jQuery UI 根据标签的状态为标签分配不同的类。
if($('.my_accordion').parent('h3').hasClass('ui-state-active')) {
// accordion is open
}
else {
// accordion is closed
}
回答by codeasaurus
Although the Accordion control is a jquery UI component you don't have to use jquery to verify the control is in its expanded state. A simple check like this will do:
尽管 Accordion 控件是一个 jquery UI 组件，但您不必使用 jquery 来验证控件是否处于展开状态。像这样的简单检查将执行以下操作：
/**
* returns true if the elt is a header tag of an accordion control
* that is in the active state (expanded)
* @param {HTMLElement} elt - one of the header elements of the accordion div
*/
function isActive(elt){
elt.classList.contains('ui-state-active');
}
if you WANT to use jquery you can do this:
如果你想使用 jquery，你可以这样做：
$('query-string').hasClass('ui-state-active');
回答by Avudaiammal
Solution for the current clicked link is activate:
当前点击的链接的解决方案是激活：
HTML Code
HTML代码
<div id="accordion">
<div>
<h2><a href="#services">Services</a></h2>
<p>More information about all of these services</p>
</div>
<div>
<h2><a href="#about">About</a></h2>
<p>About us</p>
</div>
</div>
Jquery Code:
查询代码：
<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", navigation: true });
});
</script>
