JQuery аккордеон: запретить открытие панели / отмена события изменения старта

Question

У меня есть следующая разметка:

<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);
        }
    }
});

Идея заключается в том, что есть некоторые варианты использования, которые не позволяют пользователю изменять панели, однако отмены события, описанные выше, не действуют, и панели все еще можно изменить.

Есть ли способ предотвратить смену панелей? Я также попытался активировать текущую панель программным способом, чтобы предотвратить изменение, но это вызвало еще одно событие изменения начала, и все ады вырвались на свободу (аккордеон фактически разбился)

Answer 1

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

у меня работает.

Answer 2

Перед запуском аккордеона добавьте свой пользовательский обработчик кликов со своей логикой. stopImmediatePropagation остановит событие до вызова обработчика аккордеона.

$('.quiz-qa h3').click(function(e) {      
  if ($(this).hasClass("deleted")) {
    e.stopImmediatePropagation();
    return false;      
   }   
});    
$('.quiz-qa').accordion();

Answer 3

Я подал запрос на улучшение: Билет 6651 .

Answer 4

Прошло несколько лет после того, как вопрос был задан изначально, и я использую jQuery-UI 1.11.2, так что это может быть неверный ответ.

Но это то, что я нашел, чтобы работать лучше всего:

1. Сначала укажите заголовок, который вы хотите отключить для идентификатора disable_this, или найдите другой способ выбрать соответствующий заголовок (и).

2. Затем добавьте эту строку кода

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

Некоторые из методов, упомянутых в предыдущих ответах (unbind("click") и e.stopImmediatePropogation()), работали для меня в ограниченном смысле, поскольку они предотвращали открытие панели при щелчке по заголовку. Но у моего метода есть 2 дополнительных преимущества:

• Останавливает заголовок, принимающий выделенный стиль при нажатии.

• Придает заголовку отключенный стиль.

Намного удобнее.

Answer 5

Я нашел обходной путь, который работает в моем контексте - я избегаю необходимости отменять событие вообще, просто отключая заголовки h3 (после присвоения им идентификатора) при необходимости:

HTML:

<div>
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3>
    <div>Blah blah</div>
</div>

сценарий:

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

Answer 6

Возможно, он доступен в более старых jQueryUI, но если вы используете jQuery-UI 1.9.2 или новее, вы можете отключить свертывание аккордеона в событии beforeActivate;

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

Answer 7

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

См jsFiddle-гармошка

Answer 8

Я создаю содержимое аккордеона динамически, поэтому привязка вызова события до генерации аккордеона не работает для меня. Поэтому я попытался связать stopImmediatePropagation после создания аккордеона, и это сработало для меня.

Answer 9

Мне нужно было вывести это поведение, потому что я цеплялся на драггейте и аккордеоне. Я выкладываю свое решение здесь для тех, кто ищет такое же решение.

Поведение, которое я пытался избежать, вызывало изменение аккордеона после перетаскивания, когда заголовки являются ручкой для аккордеона и перетаскиваемого. Таким образом, каждый раз при перетаскивании сворачивается раздел содержимого, который в данный момент развернут.

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'
});

Answer 10

Хотя user438316 и дает аналогичный ответ, в нем слишком много ненужного кода, return false - явный шум ... как насчет просто:

$('#accordion .deleted').click(function(e) {      
    e.stopImmediatePropagation();
});    
$('#accordion').accordion();