0

jQuery を使用して、クラスをいくつかの要素に追加しています。

クラスを追加したり、削除したりするのは初めてではありません。しかし、私はまだスタイルに関してやや中級者であり、柔軟なスタイルは単一の要素に対して実行できます。

何が起こっているかは次のとおりです。

jQuery で影響を与えている 2 つの 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>

私は基本的に、これらの 2 つの div を以下の jQuery の例で切り替えています。

これまでのところ、これらの 2 つの個別のインスタンスが機能するようになりました。

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

それから........

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

これは機能しますが、私は完全に満足していません。
同時に margin-left を変更しながら、columnleft の非表示を切り替えるために使用できるクラスを 1 つまたは 2 つ作成したいと思います。

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含み、 orのクラスを持つ別のものがあった場合:#columnleft#columncenter.hide-left.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; 
}

.hide-leftjQuery を更新して、親コンテナーのまたは.show-leftクラスを切り替えるだけです。

ここで行ったことは、追加.disappearと.maximizeスタイリングに似ていますが、2 つの列の周りに少しコンテキストを追加しました。素晴らしい点は、すべてのスタイル設定が純粋に CSS によって処理されることです。サイドバーを表示または非表示にする場合、必要なのは JavaScript だけでコンテナーの状態を更新できます。つまり、コンテナー内のクラスを非表示から表示に、またはその逆に変更します。

于 2012-11-08T03:22:59.377 に答える
0

!importantcss スタイルを設定する必要があります。

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

これにより、同じ種類の他のスタイリングをオーバーライドすることができます。ここで確認してください。

CSS には重要な順序があります。id#はクラスよりも重要であると見なされます(id は.1 つだけで、結局は多くのクラスが存在できます)。そのため、id をクラスでオーバーライドしようとしている場合は、!important.

于 2012-11-08T03:16:50.600 に答える
0

css の各タイプのセレクターは、id がクラスよりも高く、クラスがオブジェクトよりも高い重み付けが異なります。

問題を解決するには、セレクターをそのようにします

#columncenter.maximize

これにより、その前のルールが上書きされます

後で何か!importantがオーバーライドされた理由を見つけるのが難しい場合があります。

于 2012-11-08T03:22:37.380 に答える