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/

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>

＆＃34;可折叠＆＃34; <DIV> </DIV>

2 个答案: