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>

addClass函数不能按预期工作

1 个答案: