JQuery UI：手风琴回调

Posted 2023-05-08

【中文标题】JQuery UI：手风琴回调

【英文标题】：JQuery UI: Accordion callbacks

【发布时间】：2011-01-31 06:40:39

【问题描述】：

我需要我的 javascript 仅在我打开手风琴的一个部分时执行回调，截至目前，当我打开或关闭一个部分时它会执行回调，因为我只使用单击功能。有没有办法可以修改现有的点击功能，使其仅在给定部分被激活时运行？

我目前的点击功能：

$("a#mimetypes").click(function() 
    $("span#mimetypesthrobber").loading(true,  max: 1500 )
    $.getJSON("../mimetypes", function(data) 
        //callback
    );
);

谢谢！

编辑：

我已经对手风琴的另一部分进行了尝试，但它不能正常工作：

$('.ui-accordion').bind('accordionchange', function(event, ui) 
if (ui.newHeader == "Encoders") 
EncodersGet();

);

【参考方案1】：

您可以使用“change event”

$('.ui-accordion').bind('accordionchange', function(event, ui) 
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
);

例如访问“newHeadert”并进行处理

编辑

根据新信息 collapsible: true, active: false

$(document).ready(function() 
            var $acc = $('#accordion').accordion( collapsible: true,
                   active : false ,
                   change : function (event, ui)
                   
                                var index = $acc.accordion( "option", "active");
                    if( index === false)
                                 // all are close
                                
                                else
                                 // 0-based index of the open section
                                

                   
            );
        );

“option, active”将返回打开部分的索引，如果所有部分都关闭，则返回“false”

【参考方案2】：

对承办商回答的一个改进：在将 index 与 false 进行比较时使用三等号以避免匹配第一个手风琴元素。

if (index === false) 
  // All are closed
 else 
  // 0-based index of the open section

请记住，双等号在评估条件时会执行类型转换。

【参考方案3】：

如果所有手风琴部分都由 dfault 关闭，您可以将 click 事件替换为 toggle 并让第二个函数简单地什么也不做。

$("a#mimetypes").toggle(function() 
    $("span#mimetypesthrobber").loading(true,  max: 1500 );
    $.getJSON("../mimetypes", function(data) 
        //callback 
    );
,
function() 
    //do nothing
);

更好的解决方案是将一个类添加到活动部分并在调用加载之前检查该类。

$("a#mimetypes").click(function() 
    if ($(this).hasClass("active")) 
        $(this).removeClass("active");
    
    else 
        $(".active").removeClass("active"); //Edit - remove all active classes to account for this section being closed by the opening of another
        $(this).addclass("active");

        $("span#mimetypesthrobber").loading(true,  max: 1500 );
        $.getJSON("../mimetypes", function(data) 
            //callback 
        );
    
);

【讨论】：

您更好的解决方案的缺陷是您可以通过单击另一个部分的标题来关闭手风琴中的一个部分。因此，即使手风琴不再活动，该类也不会被删除。

我还应该指出，我的手风琴 css 是 collapsible: true, active: false