logo标签列表

jQuery手风琴：防止面板打开/取消changestart事件

jqueryjquery-uijquery-events
11

我有以下的标记：

<div id="accordion" class="leftaligned">
    <div>
        <h3><a href="#">Stakeholder</a></h3>
        <div>Content</div>
    </div>
    <div>
        <h3><a href="#">Relationships</a></h3>
        <div>Blah blah</div>
    </div>
    <div>
        <h3><a href="#">Address</a></h3>
        <div>Yada yada</div>
    </div>
    <div>
        <h3><a href="#">Contact Details</a></h3>
        <div>Foo bar</div>
    </div>
</div>

我按照以下方式创建手风琴：

$("#accordion").accordion({
    header: "h3",
    fillSpace: true,
    changestart: function(event, ui) {
        if (someConditionIsTrue()) {
            event.stopPropagation();
            event.preventDefault();
            return (false);
        }
    }
});

这个想法是有一些使用情况会阻止用户更改窗格，但上述取消事件的操作没有效果，仍然可以更改窗格。

有没有办法防止更改窗格？我还尝试以编程方式激活当前窗格以防止更改，但这会触发另一个changestart事件，导致一切都混乱了（手风琴实际上会崩溃）

10个回答
10

$("#accordion .h3").unbind("click");

这对我很有效。

难道不是$("#accordion h3").unbind("click");吗？请参考http://jsfiddle.net/aravindtri/SDqF2/。 - Aravind
7
在初始化手风琴之前，使用自定义的单击处理程序和逻辑。 stopImmediatePropagation将在手风琴处理程序被调用之前停止事件。
$('.quiz-qa h3').click(function(e) {      
  if ($(this).hasClass("deleted")) {
    e.stopImmediatePropagation();
    return false;      
   }   
});    
$('.quiz-qa').accordion();
我刚刚添加了"this.options.disabled = true;"而不是"e.stopImmediatePropagation();"，这个方法非常有效。 - Josh
3
1
我找到了一个适用于我的情况的解决方法 - 当需要时，我通过禁用h3标题（在给它们一个id之后）来避免完全取消事件：
html:
<div>
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3>
    <div>Blah blah</div>
</div>

脚本：

if (someConditionIsTrue()) {
    $("#relationshipsHeader").attr("disabled", "disabled");
    // and so on...
}
1

这个问题提出已经过去几年了，我正在使用jQuery-UI 1.11.2，所以那时这可能不是一个有效的答案。

但这是我发现最好的方法：

  1. First give the header you want to disable the id disable_this, or find some other way you can select the relevant header(s).

  2. Then add this line of code

    $('h3#disable_this').addClass('ui-state-disabled');

之前的回答中提到的一些方法（unbind("click")和e.stopImmediatePropogation()）在有限的意义上对我起作用，它们防止了单击标题时打开面板。但是我的方法有两个额外的好处：

  • 防止标题在单击时采用突出显示样式。

  • 为标题提供禁用样式。

更加用户友好。

0

也许在旧的jQueryUI版本中可以使用，但如果您使用的是jQuery-UI 1.9.2或更新版本，则可以在beforeActivate事件中禁用手风琴折叠；

beforeActivate: function (event, ui) {
    event.preventDefault();
}
0

我需要这种行为的推导，因为我正在链接可拖动和手风琴。我在这里提供我的解决方案，供寻找相同解决方案的任何人使用。

我试图避免的行为是，在标题既是手风琴又是可拖动的情况下，在拖动后触发手风琴更改。所以，每次拖动时，它都会折叠当前展开的内容部分。

HTML：

var $container = ('<div id="accordion">');
var $content = ('<div>');
$content.append(
    '<h1>Header 1</h1>' +
    '<div>Content 1</div>' +
    '<h1>Header 2</div>' +
    '<div>Content 2</div>'
);

JS：

$container.append($controls)
.draggable({
    handle: ':header',
    start: function(event, ui) {
        $(event.toElement).addClass('ui-dragging');
    }

});
$container.find(':header').click(function (event) {
    var $this = $(this);
    if ($(this).hasClass('ui-dragging')) {
        event.stopImmediatePropagation();
        $this.removeClass('ui-dragging');
    }
});
$container.accordion({
    collapsible: true,
    header: ':header'
});
0

我正在动态创建手风琴的内容，因此在手风琴生成之前绑定事件调用并不适用于我。所以我尝试在手风琴创建后绑定stopImmediatePropagation，这对我起作用了。

0
-1

虽然用户438316给出了一个类似的答案，但是它包含了太多不必要的代码，return false显得很突兀...那么只需要这样：

$('#accordion .deleted').click(function(e) {      
    e.stopImmediatePropagation();
});    
$('#accordion').accordion();
返回false是有目的的，这也是问题的作者使用的。 - lsl
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接