jquery - 复选框未 checkin jQuery slideToggle UL 列表

Question

我正在使用一些简单的 jQuery 来滑动切换一系列嵌套的

这工作正常，但是，如果我的 < li > 元素中有复选框，则无法选中

我有以下 jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('.toggle li:has(ul)').click(function (event) {
            $(this).css('list-style-type', $(this).children().is(':hidden') ? 'circle' : 'square')
            $(this).children().slideToggle('fast')
            return false
        })

        .css({ cursor: 'pointer', 'list-style-type': 'circle' })
        //show to start with
        .children().show()

        $('li:not(:has(ul))').click(function (event) { return false })
    })
</script>

这应用于我的 HTML:

<h1>
    Toggle</h1>
<ul class="toggle">
    <li><a href="#">Item 1</a></li>
    <li>Item 2
        <ul>
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
</ul>
<ul class="toggle checkboxes">
    <li><a href="#">Item 1</a></li>
    <li>Item 2
        <ul>
            <li>
                <input type="checkbox" name="chk1" /><label for="chk1">Red (86)</label></li>
            <li>
                <input type="checkbox" name="chk2" /><label for="chk2">Yellow (86)</label></li>
            <li>
                <input type="checkbox" name="chk3" /><label for="chk3">Green (173)</label></li>
        </ul>
    </li>
</ul>

两个列表都按预期滑动，但是，第二个列表中的复选框没有选中..没有任何反应。

我认为这与我在 jQuery 中的点击事件有关，但我不确定如何解决它。

我正在使用一些 CSS(很确定这不是它的原因) css 主要防止图标/样式类型显示在包含复选框的列表中。

<style type="text/css">
    ul { list-style-type: circle; margin-left: 10px; margin-top: 10px; }
    .checkboxes ul { margin-left: 0px; list-style-type: none; }
    ul a { font-weight: normal; text-decoration: none; }
    ul a:hover { text-decoration: underline; }
</style>

如果有更好的方法，我会洗耳恭听

Answer 1

改变

 $('li:not(:has(ul))').click(function (event) { return false }) 

到

 $('li:not(:has(ul))').click(function (event) { 
  event.stopPropagation();
 }) ;

查看这篇文章，了解为什么您应该停止在 vent 处理程序中使用 return false。

http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

文章节选:

What return false is really doing First off, return false is actually doing three very separate things when you call it:

1.event.preventDefault();
2.event.stopPropagation();
3.Stops callback execution and returns immediately when called.