"可折叠"<div>

Question

我遇到了一些麻烦,我试图隐藏,直到用户点击一个元素.

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的情况下实现此目的.

我在这做错了什么？

谢谢,希望有人能帮忙.

Answer 1

你的sidebarlistscroll 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/