上一篇: jquery – 带有MVC5的Parsley js 下一篇:jquery – Pjax将id添加到url

Jquery UI Accordion – 如何将面板大小设置为零或防止其在单击时显示？

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery UI Accordion – 如何将面板大小设置为零或防止其在单击时显示？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这是一个非常简单的情况,但我很惊讶,没有讨论或问题的解决方案或可能是这么简单,我是唯一一个被它困扰的人.

在任何面板都有菜单的手风琴中,有些情况下不能显示内容面板,因为标题本身是(菜单的)唯一选项.标题本身处理click事件并在不扩展内容面板的情况下执行某些操作.

所以,我尝试了以下内容：

一个. CSS的所有可能方法都将内容面板的div高度设置为零,包括静态和动态,在各个地方,包括activate和beforeactivate事件处理程序.

湾将ui-state-disabled类添加到create事件处理程序的标头中.工作正常,但有两个小问题.首先,禁用标题获取不同的CSS,第二个单击标题时,其他面板不会崩溃,因为禁用标题会阻止单击事件进一步传播并执行折叠当前打开的内容面板的工作.没有可用于明确调用的崩溃方法.

C.在how to disable certain links of jquery accordion尝试了解决方案.不起作用.

有人可以提出任何新方法吗？问题不同,是实施一个由手风琴驱动的菜单.当有多个选项时,菜单小部件嵌入在面板中.如果是单曲,则手风琴本身的标题是可点击的菜单项/选项.

解决方法

您可以在beforeActivate函数中使用event.toElement.首先将id设置为h3标签.

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

现在检查event.toElement id是否为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",falsE);
    } else if (event.toElement) {
        if ($span.hasClass('ui-icon-minus')) {
            $span.removeClass('ui-icon-minus');
            $span.addClass('ui-icon-plus');
        }
    }
}