请您帮我完成这项工作,我想做的就是这个。
当前单击一个组时,新组将打开,而已打开的组将保持打开状态。
我想关闭所有其他人,并且只打开活动组。
示例可以在下面找到:
var accordionsMenu = $('.cd-accordion-menu');
if (accordionsMenu.length > 0) {
accordionsMenu.each(function() {
var accordion = $(this);
accordion.on('change', 'input[type="checkbox"]', function() {
var checkbox = $(this);
(checkbox.prop('checked')) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300): checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
});
});
}
<h1>Multi-Level Accordion Menu</h1>
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name="group-1" id="group-1">
<label for="group-1">Group 1</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-1" id="sub-group-1">
<label for="sub-group-1">Sub Group 1</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="sub-group-2" id="sub-group-2">
<label for="sub-group-2">Sub Group 2</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
<label for="sub-group-level-3">Sub Group Level 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-2" id="group-2">
<label for="group-2">Group 2</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-3" id="group-3">
<label for="group-3">Group 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-4" id="group-4">
<label for="group-4">Group 4</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-3" id="sub-group-3">
<label for="sub-group-3">Sub Group 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
</ul>
<!-- cd-accordion-menu -->
信用:@jeto
答案 0 :(得分:0)
使用小提琴中的HTML,这样的方法应该起作用:
$(function() {
$('.cd-accordion-menu input[type="checkbox"]')
.on('change', function(e) {
// Retrieve the sibling <li>'s
var $sameLevelSiblings = $(this).closest('li').siblings();
// Uncheck the corresponding checkboxes and hide the items
$sameLevelSiblings.find('input[type="checkbox"]').prop('checked', false);
$sameLevelSiblings.find('ul').slideUp(300);
// Display or hide the current items depending on checkbox state
if ($(this).is(':checked')) {
$(this).siblings('ul').slideDown(300);
} else {
$(this).siblings('ul').slideUp(300);
}
})
// Hide all items on load
.siblings('ul').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Multi-Level Accordion Menu</h1>
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name="group-1" id="group-1">
<label for="group-1">Group 1</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-1" id="sub-group-1">
<label for="sub-group-1">Sub Group 1</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="sub-group-2" id="sub-group-2">
<label for="sub-group-2">Sub Group 2</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
<label for="sub-group-level-3">Sub Group Level 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-2" id="group-2">
<label for="group-2">Group 2</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-3" id="group-3">
<label for="group-3">Group 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li class="has-children">
<input type="checkbox" name="group-4" id="group-4">
<label for="group-4">Group 4</label>
<ul>
<li class="has-children">
<input type="checkbox" name="sub-group-3" id="sub-group-3">
<label for="sub-group-3">Sub Group 3</label>
<ul>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
<li><a href="#0">Image</a></li>
<li><a href="#0">Image</a></li>
</ul>
</li>
</ul>
<!-- cd-accordion-menu -->
注意:使用HTML元素/属性作为选择器是一种不好的做法,我建议改为使用data-
属性。