У меня есть следующая разметка:
<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 событие, и весь ад вырывается на свободу (аккордеон на самом деле повреждается),
Я нашел обходной путь, который работает в моем контексте - я избегаю необходимости полностью отменять событие, просто отключая 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...
}
$ ("# accordion .h3"). Unbind ("click");
у меня работает.