且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

“可折叠” < div>

更新时间:2023-02-06 17:05:13

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