0

我正在使用 jQuery 向一些元素添加一个类。

我对添加类并不陌生，也不是删除它们。但我在样式方面仍然有点中间，任何灵活性样式都可以对单个元素执行。

这是发生了什么：

我有 2 个使用 jQuery 影响的 div：

<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>

简而言之，column left 大约 155px 宽，而 columncenter 相对于 columnleft 定位，margin-left 为 162px

这是我的风格：

<style>
#columnleft {
  float:left; 
  position:relative;
  text-align:left;
  width:155px; 
}

#columncenter {  
  position:relative; 
  padding-bottom:50px
  margin:0; 
  margin-left:162px; 
}
</style>

我基本上用下面的 jQuery 示例来切换这 2 个 div：

到目前为止，我已经让这两个单独的实例开始工作：

$("#columnleft").hide();
$("#columncenter").css("margin","0px");

然后........

$("#columnleft").show();
$("#columncenter").css("margin-left","162px");

虽然这可行，但我并不十分满意。
我更喜欢创建一个或两个类，我可以使用它来切换 columnleft 的隐藏，同时还可以同时更改 margin-left。

当我只使用 jQuery 时，上面的示例一切正常。但是有时页面加载时，columnleft 意味着隐藏，columncenter 意味着从一开始就被扩展。在那些时刻不需要 jQuery 进入场景会很好。

我能想到的是：

<style>
.disappear { display:none; }
.maximize { margin:0px;  margin-left:0px; }
</style>

页面加载时：

<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>

似乎 columncenter 被忽略了。（columnleft 确实消失了）此外，使用 jquery 切换，也会出现相同的结果。

专栏中心讨厌我！有谁看到我错过了标记？

4

3 回答 3

1

查看 JSFiddle：http: //jsfiddle.net/tuanderful/bTZq8/

如果你有另一个div同时包含#columnleftand #columncenter，并且有一个.hide-leftor类怎么办.show-left：

<div class="hide-left">
    <div id="columnleft">stuff in here</div>
    <div id="columncenter">bigger stuff in here</div>
</div>

​ 然后添加以下 CSS：

.show-left #columnleft {
    display: block;
}
.show-left #columncenter {
    margin-left: 162px; 
}

.hide-left #columnleft {
    display: none;
}
.hide-left #columncenter {
    margin-left: 0; 
}

您可以更新您的 jQuery 以简单地切换父容器上的.hide-left或类。.show-left

我在这里所做的与添加.disappear和.maximize样式类似，但我在两列周围添加了一些上下文。巧妙的是，所有的样式都完全由 CSS 处理——当你想显示或隐藏你的侧边栏时，你只需要 JavaScript 来更新容器的状态；也就是说，将容器中的类从隐藏更改为显示，反之亦然。

于 2012-11-08T03:22:59.377 回答
0

你需要穿上!importantcss样式。

.maximize {
  margin-left: 0px !important;
}

这使得它可以覆盖任何其他同类样式。在这里查看。

CSS中有一个重要性顺序。一个 id#被认为比一个类更重要.（毕竟只能有一个 id 和许多类）。因此，如果您尝试使用类覆盖 id，则需要使用!important.

于 2012-11-08T03:16:50.600 回答
0

css 中每种类型的选择器的权重不同 id 高于 classes 和 classes 高于 objects

解决您的问题，使选择器成为这样

#columncenter.maximize

这将覆盖它之前的规则

不要使用!important，虽然它现在可能有效，但以后可能很难找出为什么某些东西会被覆盖

于 2012-11-08T03:22:37.380 回答