4

这是一个非常简单的情况，但我很惊讶没有讨论或提出问题的解决方案，或者它可能是如此简单，以至于我是唯一一个被它难倒的人。

在面板有菜单的任何Accordion中，都会出现不能显示 Content 面板的情况，因为 Header 本身是（菜单的）唯一选项。标头本身处理点击事件并在不展开内容面板的情况下执行某些操作。

所以，我尝试了以下方法：

一个。div让 CSS 将内容面板的高度设置为零的所有可能方法，无论是静态的还是动态的，在不同的地方，包括在activate和beforeactivate事件处理程序中。

湾。ui-state-disabled在创建事件处理程序的标题中添加了类。工作正常，但有两个小问题。首先，禁用的标题获得不同的 CSS，其次，当单击标题时，其他面板不会折叠，因为禁用标题会阻止单击事件进一步传播并完成折叠当前打开的内容面板的工作。没有可用于明确调用的折叠方法。

C。尝试了如何禁用 jquery 手风琴某些链接的解决方案。不工作。

有人可以提出任何新方法吗？不同的问题是实现 Accordion 驱动的菜单。当有多个选项时，菜单小部件嵌入在面板中。如果是单个，则 Accordion 本身的标题是可点击的菜单项/选项。

4

2 回答 2

3

您可以使用event.toElementinbeforeActivate函数。首先为h3标签设置一个id。

<h3 id="3">Section 3</h3>

现在检查event.toElementid 是否为3. 如果是，执行event.preventDefault()

$("#accordion").accordion({
    beforeActivate: function (event, ui) {
        if($(event.toElement).attr('id') == 3)        
            event.preventDefault();
    }
});

演示：JsFiddle

编辑以在选择只有标题的手风琴时折叠活动手风琴，使用以下代码

if($(event.toElement).attr('id') == 3){
    event.preventDefault();
    $("#accordion").accordion( "option", "active", false );
}

修改后的演示：JsFiddle

编辑修复图标。虽然有点乱，但它有效

beforeActivate: function (event, ui) {
    var $span = $('#accordion h3#3 span').first();
    if ($(event.toElement).attr('id') == 3) {
        event.preventDefault();
        if ($span.hasClass('ui-icon-minus')) {
            $span.removeClass('ui-icon-minus');
            $span.addClass('ui-icon-plus');
        } else {
            $span.removeClass('ui-icon-plus');
            $span.addClass('ui-icon-minus');
        }
        $("#accordion").accordion("option", "active", false);
    } else if (event.toElement) {
        if ($span.hasClass('ui-icon-minus')) {
            $span.removeClass('ui-icon-minus');
            $span.addClass('ui-icon-plus');
        }
    }
}

修改后的演示：JsFiddle

于 2013-11-03T05:15:15.240 回答
0

实际上，这应该是评论，而不是我的回答。但我无法在评论部分挤压它，我是这个论坛的新手。只是想发布解决方案。它完全基于@th1rdey3 提供的指示，因此您需要先查看他的解决方案，然后再在此处进行编辑。这个概念是，如果标题没有任何可扩展的内容，那么应该首先删除图标。这简化了解决方案，也使 UI 合乎逻辑。添加活动状态是因为 CSS 会相应地更改 hdr 的背景颜色，否则由于 preventDefault 而不会发生。

 $( "#accordion" ).accordion({collapsible: true, active:false, heightStyle:"content",
     icons: {
             "header": "ui-icon-plus",
             "activeHeader": "ui-icon-minus"
     }, 
     collapsible: true,
     create: function (event, ui) {
        $('#accordion h3#3 span').remove();
     },
     beforeActivate: function (event, ui) {
         $('#3').removeClass("ui-state-active"); //Can be removed conditionally too
         if ($(event.toElement).attr('id') == 3) {
                    event.preventDefault();
         $("#accordion").accordion("option", "active", false);
       } 
     }
 });
$('#3').click(function() {  $(this).addClass("ui-state-active"); /* do stuff here on click */ });
于 2013-11-03T18:10:09.250 回答