jQuery Accordion - 需要当前选定内容部分的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2236633/
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 - Need index of currently selected content part
提问by Bruce
I have a simple menu on a web page, based on the jQuery Accordion. I have simplified the code somewhat, and it looks like this;
我在网页上有一个基于 jQuery Accordion 的简单菜单。我稍微简化了代码，它看起来像这样；
<div id="menu_div" class="nt-tab-outer nt-width-150px">
<h3 class="nt-tab-title"><a href="#">Menu A</a></h3>
<div id="menu_1_div">
<a href="itemA1">Item A1</a><br />
<a href="itemA2">Item A2</a><br />
</div>
<h3 class="nt-tab-title"><a href="#">Menu B</a></h3>
<div id="menu_2_div">
<a href="fTabsDyn">Item B1</a><br />
<a href="fPlainDyn">Item B2</a><br />
</div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery("#menu_div").accordion({
active: 1,
change: function(event, ui) {
alert('bob');
}})
});
</script>
This sets the 2nd "part" of the accordion open when the page opens. (active:1) and if either of the headers is clicked a simple alert "bob" pops up. So far so good.
这将在页面打开时打开手风琴的第二个“部分”。(active:1) 并且如果单击任一标题，则会弹出一个简单的警报“bob”。到现在为止还挺好。
Now I'd like to replace "bob" with the index of the header. So the "read" version of "active". ie, when the first accordion header is clicked I get 0, and if the second header is clicked I get a 1.
现在我想用标题的索引替换“bob”。所以是“活动”的“阅读”版本。即，当第一个手风琴标题被点击时，我得到 0，如果第二个标题被点击，我得到一个 1。
(Aside, of course I don't really want to do an Alert, I want to make an Ajax call to the server with the value, so the server knows which menu is open at the client. That part I can do, but I'm struggling to get the right value to send. If the index is not available then feel free to offer alternate suggestions).
（除此之外，当然我真的不想做警报，我想使用该值对服务器进行 Ajax 调用，以便服务器知道客户端打开了哪个菜单。那部分我可以做，但是我正在努力获得要发送的正确值。如果索引不可用，请随时提供替代建议）。
Thanks!
谢谢！
回答by Lazarus
From the jquery UI documentation as available at the JQuery UI web site:
从JQuery UI 网站上提供的 jquery UI 文档中：
//getter
var active = $('.selector').accordion('option', 'active');
or in your case
或者在你的情况下
var active = jQuery("#menu_div").accordion('option', 'active');
回答by Bruce
Bruce's Google Law - it doesn't matter how long you struggle for, 1 minute after posting your question Google will finally offer up the answer.
布鲁斯的谷歌法则——不管你挣扎多久，在发布你的问题 1 分钟后，谷歌最终会提供答案。
function(event, ui) {
var index = jQuery(this).find("h3").index(ui.newHeader[0]);
alert('bob ' + index);
}})});
Oh well, maybe this'll help someone else down the road.
哦，好吧，也许这会帮助其他人。
回答by Lin
You can get the active index by using
您可以使用以下方法获取活动索引
ui.options.active
回答by Manisha Chauhan
activate: function(event, ui)
please make use of activate method instead of change. It works fine for me.
请使用激活方法而不是更改。这对我来说可以。
回答by kishore
try this :need the name of the accordion this is what i did. should work for the above html. hope it helps. better solution is give a id to the accordion header and fetch it directly.
试试这个：需要手风琴的名字，这就是我所做的。应该适用于上述 html。希望能帮助到你。更好的解决方案是给手风琴头一个 id 并直接获取它。
$("#accordion1").accordion({
heightStyle: "fill",
activate: function( event, ui ) {
var name = ui.newHeader[0].childNodes[1].innerHTML;
console.log(name);
}
});
回答by Michael Ecklund
Here's a practical example in WordPress Development, working with Widgets.
这是 WordPress 开发中的一个实际示例，使用小部件。
Say you have an accordion within a Widget form, and you want it to remember what "Settings Group" the user was in when they saved the Widget.
假设您在 Widget 表单中有一个手风琴，并且您希望它记住用户在保存 Widget 时所在的“设置组”。
jQuery( document ).ready( function () {
var current_settings_group = false;
var do_widget_js = function ( $widget_id ) {
var target = ".mbe-accordion"; // Your generic accordion selector
if ( $widget_id ) {
target = "#" + $widget_id + " " + target;
}
jQuery( target ).accordion( {
collapsible: true,
active: current_settings_group,
heightStyle: "content",
activate: function ( event, ui ) {
current_settings_group = jQuery( this ).find( "h3" ).index( ui.newHeader[0] );
}
} );
};
do_widget_js();
jQuery( document ).on( "widget-added widget-updated", function ( $event, $widget ) {
do_widget_js( jQuery( $widget ).attr( 'id' ) );
} );
} );
