4

ユーザーが要素をクリックするまで、非表示にしようとしていることに問題があります。

HTMLは次のようになります。

<h3 class="filter-type">BRAND</h3>
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

そしてここにCSSがあります：

.filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}

.filter-type:active .sidebarlistscroll {
    visibility: visible;
}

また、：focusサブクラスと：hoverサブクラスを使用してみましたが、それでも機能せず、divは何があっても非表示のままになります。

可能であればJavaScriptを使用せずにこれを達成しようとしています。

私はここで何が間違っているのですか？

ありがとう、誰かが助けてくれることを願っています。

4

2 に答える 2

8

サイドバーリストスクロールDIVは、 H3内ではなくH3の後にあります。このように書いてください：

.filter-type:active + .sidebarlistscroll {
    visibility: visible;
}

クリックを停止した後もdivを表示したままにする場合。次に、コードにいくつかの変更を加える必要があります。このように書く：

<label class="filter-type" for="filter">BRAND</label>
<input type="checkbox" id="filter">
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

CSS

.filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}
#filter{display:none}
#filter:checked + .sidebarlistscroll{
    visibility: visible;
}

これをチェックしてくださいhttp://jsfiddle.net/BU4Qt/

于 2013-01-25T10:35:35.030 に答える
1

これは、あなたの望むことですか...？

スタイル：

.filter-type {
  border-bottom: 1px dotted #666;
 }

HTML：

 <h3 class="filter-type">BRAND</h3>
 <p onclick="this.innerHTML='<div><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul></div>'">Click Here</p>
于 2013-01-25T10:50:57.173 に答える