时间戳

首页 > 解决方案 > addClass 函数没有按预期工作

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

问题描述

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>

标签： jquerycss

解决方案

.slideDown()添加一个内联样式属性，该属性从类display:block中覆盖。在添加内联样式属性后添加类，没有效果。display:nonedisplaynone

最简单的解决方法是替换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>

推荐阅读