0

私が持っているマークアップの簡単な例を次に示します。

HTML:

<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
    <li><a href="#">Hi</a></li>
    <li><a href="#">Bye</a></li>
</ul>

<li>チェックボックスは、特定のタグを持つを削除するためのフィルターとして使用されます。これはすべてうまくいきます。私の問題は、チェックボックスがチェックされ、フィルターロジックが実行されると、 a を使用しdisplay:noneて特定の s を削除し<li>ますが、フォーマットに使用する css が事後に正しく適用されないことです。たとえば、最初のチェックボックスをクリックすると、最初のチェックボックスが削除さ<li>れ、「さようなら」<li>だけが残るとします。それはうまくいきますが、CSS で定義した境界線は、セレクターが一致しなくても存続します。これは私が使用したセレクタです：

CSS:

#columns .calendar td ul.reveal li + li {
    border-top: 1px dotted #999;
}

このスタイルは最初は正しく適用されますが、display:noneが適用された後、'bye' li だけが残り、点線の境界線が残ります。

ブラウザ開発者コンソールを使用して確認しましたが、これは実際に境界線を作成するために適用されている唯一のスタイル ルールです。

DOM を再描画しないという行に沿って何かを読みdisplay:none、ブラウザーに再描画を強制する変数 ($('whatever')[0].offsetHeight のようなもの) にアクセスしますが、これは私の問題を解決していないようです。

4

2 に答える 2

0

選択した CSS セレクターは、描画されているものと描画されていないものではなく、DOM の構造に関心があります。セレクター S + S は、S1 が削除されている場合でも S2 に適用されます。

DOM を操作できる場合は、要素自体を削除して再度追加するか、S1 に追加されたクラスを尊重するセレクターを作成することをお勧めします (display:none も適用されます)。

例えば：

selector:not(.hidden) + selector { [Only works in IE9+] }

また

selector.active + selector.active { [Works in IE7+] }
于 2013-08-19T20:28:42.390 に答える
0

jQuery ベースのソリューション

DOM は JavaScript によって操作されているため、CSS ルール自体は機能しません。

あなたができることはli、リストに残っている最初の要素を識別するために JavaScript を使用することです。

例えば：

$('ul.reveal li').filter(':first').addClass('first-child');

CSS ルールは次のとおりです。

ul.reveal li {
    border-top: 1px dotted #999;
}
ul.reveal .first-child {
    border-top: none;
}

デモ フィドル: http://jsfiddle.net/audetwebdesign/BXMaB/

jQuery アクションはli、各ulリストの最初の要素を選択し、CSS ルールを適用して、liデフォルトですべての要素に表示される上部の境界線を認識します。

ドキュメント読み込みイベントにバインドするだけでなく、チェック ボックス (イベント) がチェックされるたびに、この jQuery アクションを適用する必要があります。

于 2013-08-19T20:44:50.373 に答える