1

別の div をクリックしたときに div を表示するためだけに CSS を使用したい

ここに私のHTMLコードがあります

<div id="contentmenu">
                <div class="show">
                    <a class="show">
                        My Student
                    </a>
                </div>
                <div class="hidden">
                        <a href="#">Link 1</a><br/>
                        <a href="#">Link 2</a><br/>
                        <a href="#">Link 3</a><br/>
                </div>
</div>

私のCSSコードは

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}

CSSのみを使用してdiv（class = show）をクリックしたときにdiv（class = hidden）を表示する方法

4

2 に答える 2

4

チェックボックスハックを使用してそれを行うことができますが、ブラウザのサポートが十分であることを確認してください。次のようになります。

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
    display: block;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
input[type=checkbox]:checked ~ .hidden {
   display: block;
}

このHTMLで：

<div id="contentmenu">
    <label for="toggle-1"><a class="show">
      My Student
      </a></label>
<input type="checkbox" id="toggle-1">
  <div class="hidden">
    <a href="#">Link 1</a><br/>
    <a href="#">Link 2</a><br/>
    <a href="#">Link 3</a><br/>
  </div>
</div>

これがデモです：http：//jsbin.com/exuvez/1/edit

于 2013-01-31T18:57:29.873 に答える
2

ハックや JavaScript を使わなくても、ホバー イベントで目的を達成できます。css への小さな変更と追加:

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
  width:100%;
}

.show:hover + .hidden {
  display:block;
}
.hidden:hover {
 display:block; 
}

width:100% が .hidden に追加され、ホバー イベントの 2 つのルールが追加されました。

http://codepen.io/anon/pen/eCmox

于 2013-01-31T19:20:21.457 に答える