0

私はしばらくの間、リンクを表示してその下の段落を非表示にしようとしてきました。

CSSのみを使用してこれを達成する必要があります。段落はロード時に非表示にして、リンクがクリックされると表示し、リンクが再度クリックされると再び非表示にする必要があります。

どうすればこれを達成できますか?

<a …………………&gt;My link</a>
<p>Sed ut perspiciatis unde omnis iste natus</p>

私は本当に助けていただければ幸いです..

4

2 に答える 2

0

これを行うために JavaScript を使用する必要はありません。これは純粋に CSS で行うことができます。これがどのように行われるかの例を次に示します。

http://jsfiddle.net/rACvb/1/

CSS

.toggle {display: block;}
.toggle-label { color: blue; text-decoration: underline; }
.toggle-label:hover {text-decoration: none; cursor: pointer; }
#Clicker {display: none;}
#Clicker:checked + .toggle {display: none;}

HTML

<label for="Clicker">Click it</label>
<input id="Clicker" class="click-detect" type="checkbox" />
<p class="toggle">
    This paragraph shows because the link hasn't been clicked. It will hide when you click the "Click It" text. Honest!    
</p>

説明：

  1. :checked 疑似セレクターを持つチェックボックスを作成しています。これは、何かがクリックされたかどうかを判断する簡単な方法です。
  2. チェックボックスは見たくないので非表示にしています。
  3. これで、必要に応じてラベルのスタイルを設定できます。あなたはそれをきれいに見せることができます、私はそれを伝統的なリンクのように見せました.
  4. ラベルをクリックすると、チェックボックスがオンになります。
  5. チェックボックスがチェックされているときに隣接する段落を非表示にする css には、隣接する兄弟セレクターがあります。

また、このサイトでは、純粋に css でこれを機能させるためのさまざまな方法について説明しています: http://tympanus.net/codrops/2012/12/17/css-click-events/

問題は、これを機能させるために「ハック」に頼っていることです。最終的には、問題を解決するためにハッキングに頼るかどうかを決定する必要があります。それしかないのなら、それでいいんだよ！

于 2013-08-08T03:05:02.837 に答える