toggleClass切换display:block失效，求排查代码问题原因

核心问题 #

你遇到的问题根源是样式优先级冲突：元素上直接写的内联样式（style="display: none"）优先级比CSS类选择器更高。就算通过toggleClass给元素加上了shown类，类里的display: block也会被内联的display: none覆盖，所以视觉上看不到变化。

解决方案 #

这里提供三种可行的解决思路，按需选择：

1. 提升类样式的优先级（快速临时解决）

修改CSS，给shown类的display属性加上!important，强制覆盖内联样式：

.shown{
    display: block !important;
}

注意：尽量少用!important，它会打乱样式的正常优先级规则，后续维护样式时容易出问题。

2. 改用CSS类控制初始隐藏（规范做法）

移除所有div上的style="display: none"，换成给它们加一个hidden类：

<div id="inputs" class="hidden"></div>
<div id="show_information" class="hidden"></div>
<div id="show-free-rooms" class="hidden"></div>
<div id="find_room_by_name" class="hidden"></div>

然后在CSS里定义两个类：

.hidden {
    display: none;
}
.shown {
    display: block;
}

JS代码保持不变，这样切换类时，两个类的优先级相同，切换后对应的样式就能正常生效，这是更符合CSS规范的写法，也便于后续维护。

3. 直接使用jQuery的toggle()方法（简单场景首选）

如果你的需求只是单纯切换元素的显示和隐藏，完全可以不用自定义类，直接用jQuery内置的toggle()方法，它会自动处理display状态的切换：

$(document).ready(function () {
    $("#add_client").click(function () {
        $("#inputs").toggle();
    });

    $("#show_clients").click(function () {
        $("#show_information").toggle();
    });

    $("#show_free_rooms").click(function () {
        $("#show-free-rooms").toggle();
    });

    $("#search-by").click(function () {
        $("#find_room_by_name").toggle();
    });
});

这种方式不需要额外写CSS，代码更简洁，适合简单的显示隐藏交互。

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