0

html コードは次のとおりです。

<div class="wrapper">
  <div class="menu-wrap">
    <ul>
     <li>
       <input type="radio" id="link1" />
     </li>
    </ul>
  </div>

  <div class="content-wrap">
    <div id="link1-content"><p>Just a paragraph</p></div>
  </div>
</div>

CSSコードは次のとおりです。

#link1:checked ~ #link1-content { display: none;}

入力[タイプ=ラジオ]でcssクリックを作成しようとしています。私の問題は、兄弟セレクターが機能しないことです。

適切な兄弟セレクターを作成するにはどうすればよいですか?

4

1 に答える 1

2

兄弟セレクターではできないことをしようとしています。#link1-contentと同じ親を共有していないため、スタイルを設定できません#link1:checked。@sirko が言ったように、これは Javascript/JQuery で達成する必要があるものです (以下の私のスニペットを参照)。

ソース の子セレクターと兄弟セレクター -- CSS トリック

一般的な兄弟セレクターと隣接する兄弟セレクターの両方で、ロジックは同じ親要素内で発生することに注意してください。

非常に単純な jQuery ソリューション: 

$('#link1').change(function(){
  $('#link1-content').toggle();
});

コードペンの例

于 2013-01-16T21:00:33.433 に答える