复选框未签入jQuery slideToggle UL列表

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

但是，如果在
• 元素中有复选框，则无法选中
  我有以下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>
  

  
  $（文档）.ready（函数（）{
  $（'.切换li:has（ul）'）。单击（函数（事件）{
  $（this.css（'list-style-type'，$（this.children（）.is（'：hidden'）？'circle'：'square'））
  $（this.children（）.slideToggle（'fast'））
  返回错误
  })
  .css（{光标：'指针'，'列表样式类型'：'圆圈'}）
  //开始表演
  .children（）.show（）
  $（'li:not（：has（ul）））。单击（函数（事件）{return false}）
  })
  

  这适用于我的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>
  

  
  切换
  
  
  项目2
  
  
  
  
  
  
  
  
  项目2
  
  
  红色（86）
  
  黄色（86）
  
  绿色（173）
  
  
  
  

  两个列表按预期滑动，但是，第二个列表中的复选框未选中。。什么也没发生
  我认为这与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>
  

  
  ul{列表样式类型：圆形；左侧边距：10px；顶部边距：10px；}
  .复选框ul{左边距：0px；列表样式类型：无；}
  ul a{字体大小：正常；文本装饰：无；}
  ul a:悬停{文本装饰：下划线；}
  

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

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

  到
  查看这篇文章，了解为什么应该停止在vent处理程序中使用returnfalse
  文章节选：
  return false实际上是先做的，return false实际上是先做的 当你称之为时，做三件非常独立的事情：
  1.event.preventDefault（）
  2.事件停止播放（）
  3.停止回调执行并在调用时立即返回
  改变
  到
  查看这篇文章，了解为什么应该停止在vent处理程序中使用returnfalse
  文章节选：
  return false实际上是先做的，return false实际上是先做的 当你称之为时，做三件非常独立的事情：
  1.event.preventDefault（）
  2.事件停止播放（）
  3.停止回调执行并在调用时立即返回

  ---

  您没有任何代码来选中复选框，甚至在标记中也没有指定它。您希望如何检查它们？您没有任何代码来检查复选框，甚至在标记中也没有指定。您希望如何检查它们？

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