Question

我在网页上有一个基于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>

当页面打开时，这将设置手风琴的第二个“部分”。（活动：1）如果单击任一标题，则会弹出一个简单的警报“bob”。到目前为止一切都很好。

现在我想用标题的索引替换“bob”。所以“活跃”的“阅读”版本。即，当点击第一个手风琴标题时，我得到0，如果点击第二个标题，我得到1。

（除此之外，我当然不想做一个警告，我想用值来对服务器进行Ajax调用，因此服务器知道客户端打开了哪个菜单。我可以做的那部分，但我很难获得正确的发送价值。如果索引不可用，请随时提供其他建议。）

谢谢！

Answer 1

来自JQuery UI web site：

中提供的jquery UI文档

//getter
var active = $('.selector').accordion('option', 'active');

或在你的情况下

var active = jQuery("#menu_div").accordion('option', 'active');

Answer 2

布鲁斯的谷歌法 - 你挣扎多久并不重要，发布问题1分钟后，谷歌最终会提供答案。

  function(event, ui) { 
  var index = jQuery(this).find("h3").index(ui.newHeader[0]);
  alert('bob ' + index);
  }})});

哦，好吧，也许这会帮助其他人继续前进。

Answer 3

您可以使用

获取活动索引

ui.options.active

Answer 4

activate: function(event, ui)

请使用activate方法而不是更改。它对我来说很好。

Answer 5

试试这个：需要手风琴的名字这就是我所做的。应该适用于上面的HTML。希望能帮助到你。更好的解决方案是给手风琴标题提供一个id并直接获取它。

    $("#accordion1").accordion({
        heightStyle:    "fill",
        activate: function( event, ui ) {
            var name =  ui.newHeader[0].childNodes[1].innerHTML;
            console.log(name);
        }
    });

Answer 6

这是WordPress开发中的一个实用示例，使用Widgets。

假设您在Widget表单中有手风琴，并且您希望它能够记住＆＃34;设置组＆＃34;用户在保存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' ) );
    } );

} );

jQuery Accordion - 需要当前所选内容部分的索引

6 个答案: