2

ユーザーがクリックするかどうかに基づいてオンまたはオフに切り替えられるようにしたい左側のサイドバーのあるページがあります。残念ながら、この Web サイトでの JavaScript コードの入力は無効になっており、CSS にしかアクセスできません。

左サイドバーには

  1. メイン div (parentBlock)
  2. 表示/非表示の div (toggleBlock)
  3. ロゴの div (div1)
  4. navbar の div、および (div2)
  5. ソーシャル アイコンの div (div2)

ユーザーが「表示/非表示」をクリックすると、次のことが必要になります。

  1. ロゴ、ナビゲーション バー、ソーシャル div を非表示 (display:none) にします。
  2. メイン div の高さをそれより小さい (たとえば 30px) に設定します。

CSSでこれを行う方法はありますか?

<div class="parentBlock">
  <div class="toggleBlock">Show / Hide</div>
  <div class="divBlah">div1</div>
  <div class="divBlah">div2</div>
  <div class="divBlah">div3</div>
</div>

次に、ユーザーが「表示/非表示」をもう一度クリックすると、div が再表示され、高さが画面いっぱいに設定されます。

これは可能ですか？

「表示/非表示」ボタンが「parentBlock」にある場合に機能するコードを見つけましたが、「toggleBlock」内にある場合は機能しませんでした (そして、toggleBlock に「表示/非表示」ボタンが必要です) ( http: //tympanus.net/codrops/2012/12/17/css-click-events/ )

onClick イベントには JavaScript が必要です。私は JavaScript を使用できないので、これらは不可能です :( :active を使用するか、チェックボックスを作成し、checkbox:clicked 値にアクションをロードさせることで回避しようとする人もいますが、それは私が特定の関係でのみ機能します決められないようです。

残念ながら、「toggleBlock」、div1、div2、および div3 の最終的な構造を変更することはできません。それらの内容とその CSS のみです。また、ページが読み込まれるたびに Web サイトが ID="" をランダムに生成するため、TARGET メソッドを使用できないため、さらに困難になります。また、3 つの div (div1 から div3 まで) は同じクラス名を持っています。私はそれが不可能だと思い始めています:(

(参考までに、私は New SmugMug でツールを使用しようとしていますが、かなり制限されています)

4

2 に答える 2

2

これは、使用するCSSのみのソリューションですtarget

デモhttp://jsfiddle.net/kevinPHPkevin/r4AQd/

.button {
    display: block;
    width:60px;
    background: red;
     z-index:1;
}
#element {
    display: none;
    background:#fff;
    margin-top:-20px;
    z-index:2;
}
#element:target {
    display: block;
}
#show:target {
    display: block;
}
#hide {
    background: #000;
    color: #fff;
}
于 2013-09-13T09:05:52.957 に答える
1

Joum が指摘しているように、これはクリック イベントを介して行うことはできませんが、兄弟にホバーを使用すると、同様の効果を達成できる可能性があります。たとえば、次の css を追加してみてください。

div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }

詳細については、これを参照してください: http://css-tricks.com/child-and-sibling-selectors/

于 2013-09-13T09:05:40.927 に答える