4

現在クリックしているもの以外のすべてを選択しようとしています。

.node-teaser基本的に、私はすべて同じようにスタイルされ、同じクラスを持つたくさんの要素を持ってい:activeます.

1 つをクリックすると、他のすべてのアニメーション/トランジションを「リセット」して、現在のものだけが大きくなるようにします。だから、基本的に、私はしたい：

.node-teaser:not(.node-teaser:active) {
   max-height: 50px;
   .....
}

ただし、疑似クラスを の引数として使用することはできません:not()。別の方法で問題を解決するにはどうすればよいですか、または何か不足していますか?

クラスは Drupal によって生成されたものであり、テーマの PHP テンプレートを変更したくありません。そして、これが純粋なCSSで機能することを自分自身に証明したいのですが、行き詰まっています。

この~セレクターがあります。現在の要素の前にすべての要素を選択するものがある場合 (要素の後のすべてを選択するチルダ セレクターの反対)、基本的にこれら 2 つを追加して、前と後のすべて = 現在のもの以外のすべてを取得します。ただし、その逆を行うセレクターはないと思い~ます。私が間違っている場合は、私を修正してください!

編集: かなり混乱しているように見えるので ^.^ (申し訳ありません): adornis.deでは、一度に 1 つのアイテムだけを展開したいので、2 つ目のアイテムをクリックすると、残りのアイテムが閉じます。通常 :active とにかくすぐに閉じますが、移行を遅らせています。

4

2 に答える 2

1

それを行う1つの方法（最も美しいとは言えません）は、デフォルトに戻すことです：

.node-teaser {
   max-height: 50px;
}

.node-teaser:active {
   max-height: auto;
}
于 2012-10-20T00:23:02.613 に答える