点击事件监听器首次触发但addClass()需二次点击才生效问题

针对你遇到的问题——首次点击#bar时console.log正常输出但addClass未生效，二次点击才起效，提供以下几种排查和解决办法：

1. 优化事件回调中的元素选择 #

在点击事件回调里，重复使用$("#bar")选择器可能存在潜在上下文问题，改用$(this)直接指代当前点击的元素，既高效又能避免选择器冲突：

$("#bar").on('click', function(event) {
  console.log("click");
  $(this).addClass("bar-open");
});

2. 调整CSS优先级，避免!important依赖 #

ID选择器（#bar）的优先级高于类选择器，虽然你用了!important强制覆盖，但这种写法不够规范，且可能被其他更高优先级的样式干扰。直接给类选择器加上ID前缀，提升优先级：

#bar {
    overflow-y: clip;
    height: 48px;
    transition: height 1s;
    position: absolute;
    z-index: 1005;
    background-color: rgb(248, 249, 250);
    border: 1px solid rgb(222, 226, 230);
    border-radius: 5px;
}

#bar.bar-open {
    height: 365px;
}

.hidden-section {
  padding-top: 100px;
}

3. 确保DOM加载完成后再绑定事件 #

如果你的jQuery代码在DOM元素渲染前执行，可能出现事件绑定不完整的情况。把代码包裹在$(document).ready()中，确保元素加载完成后再绑定事件：

$(document).ready(function() {
  $("#bar").on('click', function(event) {
    console.log("click");
    $(this).addClass("bar-open");
  });
});

4. 改用原生JS验证，排除jQuery问题 #

如果以上方法无效，尝试用原生JS实现相同逻辑，排查是否是jQuery版本（你用的2.2.4版本较老）导致的兼容性问题：

document.getElementById('bar').addEventListener('click', function() {
  console.log("click");
  this.classList.add('bar-open');
});

额外排查步骤 #

• 首次点击后，打开浏览器开发者工具的Elements面板，检查#bar元素的class列表是否已经添加了bar-open：
  • 如果class已添加但样式未生效：检查是否有其他CSS规则覆盖了height属性（可在Elements面板的Styles选项卡中查看样式优先级）
  • 如果class未添加：确认是否有其他JS代码在点击事件后移除了该类

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