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 事件并且所有地狱都崩溃了（手风琴实际上坏了）

4

10 回答 10

10

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

为我工作。

于 2010-08-02T23:41:14.950 回答
7

在启动手风琴之前，使用您的逻辑添加您的自定义点击处理程序。stopImmediatePropagation将在调用手风琴处理程序之前停止事件。

$('.quiz-qa h3').click(function(e) {      
  if ($(this).hasClass("deleted")) {
    e.stopImmediatePropagation();
    return false;      
   }   
});    
$('.quiz-qa').accordion();
于 2011-07-12T12:40:18.533 回答
3

我为此提交了增强请求：Ticket 6651。

于 2010-11-15T15:51:14.467 回答
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...
}
于 2010-01-05T09:45:06.490 回答
1

在最初提出这个问题几年后，我使用的是 jQuery-UI 1.11.2，所以这可能不是一个有效的答案。

但这是我发现效果最好的：

  1. 首先给出要禁用 id 的标头disable_this，或者找到其他可以选择相关标头的方法。

  2. 然后添加这行代码

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

unbind("click")前面的答案 (和)中提到的一些方法在e.stopImmediatePropogation()有限的意义上对我有用，因为它们在单击标题时阻止了面板的打开。但我的方法还有两个额外的好处：

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

  • 给标题一个禁用的样式。

更加用户友好。

于 2015-02-19T17:44:53.520 回答
1

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

beforeActivate: function (event, ui) {
    event.preventDefault();
}
于 2016-10-20T18:03:36.020 回答
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'
});
于 2012-04-04T01:25:26.443 回答
0 
$("#accordion h3").unbind("click");

参考 jsFiddle-手风琴

于 2013-08-13T16:10:14.540 回答
0

我正在动态创建手风琴的内容，因此在生成手风琴之前绑定事件调用对我不起作用。因此，我尝试在创建手风琴后绑定 stopImmediatePropagation，这对我来说很有效。

于 2013-03-25T06:05:19.413 回答
-1

尽管 user438316 也有类似的答案，但它有太多不必要的代码，return false很明显......怎么样：

$('#accordion .deleted').click(function(e) {      
    e.stopImmediatePropagation();
});    
$('#accordion').accordion();
于 2012-02-20T11:57:28.693 回答