如何使用内联CSS覆盖jQuery的hide()方法？附代码示例

要解决这个问题，首先得明白jQuery的hide()方法到底做了什么：它会直接在元素的style属性中添加display:none;，这会覆盖你原本通过PHP输出的display:block内联样式（因为后添加的内联样式优先级更高）。

要让你的初始内联样式不被hide()覆盖，核心思路是提升你原有样式的优先级，具体可以这么做：

方法1：给内联样式添加!important强制优先级 #

修改你的PHP输出代码，给display:block加上!important声明：

<div class="dep-adm-inp" <?php if(!empty($adm_f) || $adm_f != "") echo "style='display:block !important;'"; ?> id="fees-inp"> 
  <label>入学费用(<i class="fa fa-inr"></i>)</label> 
  <div class="input-group"> 
    <span class="input-group-addon remove-inp"><i class="fa fa-close"></i></span> 
    <input type="text" class="form-control expected" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="预期金额"> 
    <!-- 其他输入元素 -->
  </div>
</div>

!important是CSS的优先级提升规则，它会让这个display:block的优先级远高于jQuery添加的display:none内联样式，浏览器会优先应用带!important的声明。

注意事项 #

如果之后你需要动态控制这个元素的显示/隐藏，就不能再用jQuery的hide()/show()了（因为!important会覆盖这些方法的效果）。这时候建议改用类来控制：

1. 先定义一个CSS类：

.hidden-element {
  display: none !important;
}

2. 用jQuery的addClass()和removeClass()来切换显示状态：

// 隐藏元素
$('#fees-inp').addClass('hidden-element');
// 显示元素
$('#fees-inp').removeClass('hidden-element');

方法2：避免直接用hide()，改用类控制（更推荐） #

其实从可维护性角度，不推荐依赖!important，更好的做法是一开始就不用jQuery的hide()，而是通过添加/移除类来控制显示隐藏：

1. 定义基础样式和隐藏类：

.dep-adm-inp {
  display: block;
}
.dep-adm-inp.hidden {
  display: none;
}

2. PHP只负责初始化元素是否显示：

<div class="dep-adm-inp <?php if(empty($adm_f)) echo 'hidden'; ?>" id="fees-inp">
  <!-- 元素内容 -->
</div>

3. 用jQuery动态切换类：

// 隐藏
$('#fees-inp').addClass('hidden');
// 显示
$('#fees-inp').removeClass('hidden');

这种方式更清晰，也不会出现样式优先级冲突的问题。

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