jquery - addClass 函数没有按预期工作

Question

jQuery toggle 的其他效果，hide 是有效的，但 addClass 函数在这里不起作用。 displyanone 类在外部工作，但在 jQuery 函数内部不起作用。这里有什么问题？

$(document).on('click', '#menu', function() {
  if($(this).is(':checked'))
    $(this).parent().find('ul').slideDown('slow');
  else
    $(this).parent().find('ul').addClass('displaynone');  //Doesn't work
  //$(this).parent().find('ul').hide('slow'); - works. 
});

.displaynone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="left col20">
  <input type="checkbox" id="menu" name="menu[]" value="">
  Checkbox
  <ul class='displaynone'>
    <input type="checkbox" class="menusub" name="menusub" value="">
    Checkbox L2
  </ul>
</label>

Answer 1

.slideDown()添加内联样式属性 display:block ，它会覆盖 display:none从类 displaynone .添加内联样式属性后添加类，没有任何效果。

最简单的解决方法是替换 class='displaynone'与 style='display:none'并使用 .hide()隐藏元素。在这种情况下，仅使用内联样式属性。

$(document).on('click', '#menu', function() {
  if($(this).is(':checked'))
    $(this).parent().find('ul').slideDown('slow');
  else
    $(this).parent().find('ul').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="left col20">
  <input type="checkbox" id="menu" name="menu[]" value="">
  Checkbox
  <ul style='display:none'>
    <li>
      <label>
        <input type="checkbox" class="menusub" name="menusub" value="">
        Checkbox L2
      </label>
    </li>
  </ul>
</label>