“可折叠” (“Collapsible” )

我遇到一些麻烦一说我试图保持隐蔽，直到用户点击一个元素。

该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;
}

我已经使用也尝试：关注和：悬停的子类，但它仍然是行不通的，在div保持隐藏不管。

我试图做到这一点，如果没有可以使用JavaScript。

我在做什么错在这里？

谢谢你，希望有人帮助CAND。

Answer 1:

在H3内部没有H3后，您sidebarlistscroll DIV来。 像这样写：

.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/

Answer 2:

这是你想要的吗...？

样式：

.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>

文章来源: “Collapsible”