Использую конструкцию
http://jqueryui.com/demos/accordion/
<div id="accordion">
<h3><input type="checkbox" id="chk1" /><label for="chk1">Hello World 1 <a href="#" title="">Text link</a></label></h3>
<div>
<div><input type="checkbox" id="chk1-1" /><label for="chk1-1">Inner 1</label></div>
<div><input type="checkbox" id="chk1-2" /><label for="chk1-2">Inner 2</label></div>
<div><input type="checkbox" id="chk1-3" /><label for="chk1-3">Inner 3</label></div>
</div>
<h3><input type="checkbox" id="chk2" /><label for="chk2">Hello World 2 <a href="#" title="">Text link</a></label></h3>
<div>
<div><input type="checkbox" id="chk2-1" /><label for="chk2-1">Inner 1</label></div>
<div><input type="checkbox" id="chk2-2" /><label for="chk2-2">Inner 2</label></div>
<div><input type="checkbox" id="chk2-3" /><label for="chk2-3">Inner 3</label></div>
</div>
</div>
В head вставляю:
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
Все работает, но не совсем так как нужно.
Не работают чекбоксы-родители.
Мне чтото удалось набросать, но к сожалению это тоже не совсем то что нужно.
$(function() {
$('#accordion h3').each(function() {
var $this = $(this);
$this.click(function() {
if ($this.find('input:checkbox').is(':checked') == false) {
$this.find('input:checkbox').attr('checked', true);
}
else {
$this.find('input:checkbox').removeAttr('checked')
}
});
});
});
Данный скрипт позволяет отмечать чекбоксы-родители при клике на области заголовка h3, но кроме самого чекбокса.
Идеальным решением было бы, если при клике на чекбокс он отмечался а вкладыши разворачивались только при клике на ссылке которая внутри label.
Прошу помощи.