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

Posted 2023-05-08

【中文标题】jQuery Accordion - 需要当前选定内容部分的索引

【英文标题】：jQuery Accordion - Need index of currently selected content part

【发布时间】：2011-01-15 06:00:36

【问题描述】：

我在网页上有一个基于 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 调用，这样服务器就知道在客户端打开了哪个菜单。那部分我可以做，但我正在努力获得正确的价值来发送。如果索引不可用，请随时提供替代建议。

谢谢！

【参考方案1】：

来自JQuery UI web site 上的 jquery UI 文档：

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

或者在你的情况下

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

【讨论】：

嗨 Lazarus - 是的，我也是这么想的，但它总是返回 1。

@Lazarus：谢谢。这就是我要找的，“var active = jQuery("#menu_div").accordion('option', 'active');”使用 jQuery - v3.2.1 和 jQuery UI - v1.12.1 为我工作。

【参考方案2】：

Bruce 的 Google 法则 - 无论您挣扎多久，在发布您的问题 1 分钟后，Google 都会最终提供答案。

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

哦，好吧，也许这会帮助其他人。

【参考方案3】：

您可以通过使用获取活动索引

ui.options.active

【讨论】：

ui.options 当前已弃用 (jQuery UI 1.10)

【参考方案4】：

activate: function(event, ui)

请使用激活方法而不是更改。 对我来说效果很好。

【参考方案5】：

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

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

【参考方案6】：

这是一个在 WordPress 开发中使用小部件的实际示例。

假设您在 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' ) );
     );

 );