jQuery的addClass函数未正常生效，请求排查问题原因

你遇到的这个问题其实是CSS优先级在搞鬼！咱们一步步拆解：

问题根源 #

当你调用slideDown('slow')时，jQuery会在动画完成后给目标<ul>元素添加行内样式：style="display: block;"。而CSS的优先级规则里，行内样式的优先级远高于类选择器（.displaynone）。所以哪怕你后来给元素加上了.displaynone类，行内的display: block会直接覆盖类里的display: none，看起来就像addClass没生效一样。

而hide('slow')能生效，是因为它会直接给元素设置行内样式display: none——和slideDown添加的行内样式优先级相同，但后执行的会覆盖先执行的，所以能正常隐藏元素。

几种解决方案 #

1. 保持动画一致性（最推荐）

既然显示用了带动画的slideDown，隐藏也用对应的slideUp动画，jQuery会自动处理行内样式的切换，代码逻辑更统一：

$(document).on('click', '#menu', function() {
  const $menuUl = $(this).parent().find('ul');
  if($(this).is(':checked')){
    $menuUl.slideDown('slow');
  } else {
    $menuUl.slideUp('slow'); // 替换为slideUp，和slideDown配对
  }
});

2. 提升类选择器的优先级（不推荐，仅作备选）

如果一定要用addClass，可以给.displaynone的display属性加上!important，强制覆盖行内样式：

.displaynone {
  display: none !important;
}

⚠️ 注意：!important会破坏CSS的正常优先级规则，后期维护时容易出现样式冲突，除非万不得已不建议用。

3. 清空行内样式后再添加类

先手动清除元素的行内display样式，再添加类，这样类的样式就能生效：

$(document).on('click', '#menu', function() {
  const $menuUl = $(this).parent().find('ul');
  if($(this).is(':checked')){
    $menuUl.slideDown('slow');
  } else {
    $menuUl.css('display', '').addClass('displaynone');
  }
});

内容的提问来源于stack exchange，提问作者Dipak