-6ren"> -我在尝试隐藏 a 时遇到了一些问题,直到用户单击某个元素为止。 HTML 看起来像: BRAND item 1 item 2 item 3 -6ren">
gpt4 book ai didi

html - "Collapsible"<分区>

转载 作者:技术小花猫 更新时间:2023-10-29 11:57:44 26 4
gpt4 key购买 nike

我在尝试隐藏 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 的情况下实现这一目标。

我在这里做错了什么?

最佳答案

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

关于html - "Collapsible"<分区>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14519796/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com