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

您的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/

于 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 回答