$(document).on('click', '.tree label', function(e) {
$(this).next('ul').fadeToggle();
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tree">
<li class="has">
<label class="container">ROOT<span class="total">(12) </span>
<input type="checkbox" name="domain[]" value="ROOT">
<span class="checkmark"></span></label></ul>
<ul style="display: none;">
<li><label class="container">CHILD<input type="checkbox" name="subject[]" value="CHILD"><span class="checkmark"></span></label></li>
</ul></li>
</ul>
当我点击第一个标签时,它应该是fadeToggle
,下一个ul
。但是一旦它淡入,它就自动淡出。
有谁能告诉我问题出在哪里?是HTML格式不正确吗?
2条答案
按热度按时间cvxl0en21#
您的html标记错误。您尚未关闭第一个
ul
。它不会为我淡出。这里有一个截图
kxe2p93d2#
你最后一次编辑添加了一个
</li></ul>
,但它们放错了位置-</ul>
根本不是必需的,<li>
应该在第一个复选框之后。我已经在下面的代码中删除了它们。代码片段没有显示您描述的问题-
CHILD
根本没有显示。这是因为.next()
选择了the next sibling。Sibling意味着DOM树中同一级别的元素,但您正在寻找<label>
的兄弟。如果您正确格式化HTML,则更容易看到:如果你在页面上有一系列这样的事件,并且逻辑是你真的想要下一个,你可以使用
.closest()
来找到事件click的父ul
,然后使用.next()
来获得下面的ul
。像这样:x一个一个一个一个x一个一个二个x