“可折叠” < div> [英] "Collapsible" <div>

问题描述

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

I'm having some trouble with a that I'm trying to keep hidden, until the user clicks on a element.

HTML看起来像： p>

The HTML looks like:

<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都会保持隐藏。

I've also tried using :focus and :hover subclasses but still it won't work, the div stays hidden no matter what.

如果可能，我尽量不使用javascript来实现。

I'm trying to achieve this without using javascript if possible.

我在这里做错了什么？

谢谢，希望有人帮助。

推荐答案

您的 sidebarlistscroll DIV在 H3 不在 H3 之内。这样写：

Your sidebarlistscroll DIV come after the H3 not inside H3. Write like this:

.filter-type:active + .sidebarlistscroll {
    visibility: visible;
}

如果希望div在停止点击后仍然可见。然后你必须在你的代码中做一些更改。这样写：

If you want the div to remain visible after when you stopped clicking on it. Then you have to do some changes in your code. Write like this :

<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>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！