“可折叠” <div>答案

【问题标题】："Collapsible" <div>“可折叠” <div>
【发布时间】：2013-01-09 07:09:27
【问题描述】：

在用户点击某个元素之前，我试图隐藏的 a 有一些问题。

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 的情况下实现这一目标。

我在这里做错了什么？

谢谢，希望有人能帮忙。

【问题讨论】：

标签： css html visible collapse

【解决方案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/

【讨论】：

谢谢，这行得通...但是我现在看到我的代码没有做我需要的事情。在我停止单击它后，我需要 div 保持可见。关于如何实现这一目标的任何建议？

【解决方案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>

【讨论】：