CSS - 特定于单个元素的样式

Question

我正在使用 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 切换，会出现相同的结果。

Column Center 讨厌我!有没有人看到我遗漏了标记？

Answer 1

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

如果您有另一个 div，它包含 #columnleft 和 #columncenter，并且有一个类 .hide-左 或 .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 来更新容器的状态；也就是说，将容器中的类从隐藏更改为显示，反之亦然。