gpt4 book ai didi

CSS Accordion 菜单在 Chrome/Safari 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:13:01 25 4
gpt4 key购买 nike

我需要创建一个简单的 Accordion 样式菜单,在单击时显示/隐藏。它在 IE11 和 FF 中工作,但在 Chrome/Safari 中不关闭。任何人都可以为这些浏览器提供解决方法吗?我喜欢这段代码的简单性,如果可能的话我想使用它。谢谢!

.show{
display:none;
}
.hide:focus+.show{
display:inline;
}
.hide:focus{
display:none;
}
.hide:focus~#list{
display:none;
}
<p>Accordian Example</p>
<div>
<a href="#" class="hide">[hide]</a>
<a href="#" class="show">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>

最佳答案

我已经在 FF 和 Chrome 上检查过了。

不同行为的原因

在 Chrome 中,当一个元素的 display 属性设置为 none 时,它不能处于聚焦状态,我认为这是一种更可预测和统一的行为。但在 Firefox 中,即使元素的 display 属性设置为 none,它也能保持焦点。

现在,由于两种浏览器在元素焦点保留方面的行为不同,因此代码的净输出是不同的浏览器。

您可以使用这种方法吗? :不……原因是:

即使考虑到 Firefox,由于 Accordion 内容的可见性是基于焦点的,一旦用户点击网站上的任何地方,即使是在网站的空白部分,该元素也会失去焦点,它不会按预期工作。

要验证这一点,请在 firefox 上打开该示例,单击隐藏,然后单击空白区域,您将看到列表项将重新出现。

仅 CSS Accordion 的更好方法

这使用复选框来决定何时显示或隐藏。我们通过将复选框放置在视口(viewport)之外并使用标签创建可点击区域来隐藏复选框。

#toggler{
position:fixed;
top:-100px;
}
label{
cursor:pointer;
}
#toggler ~ ol{
display:none;
}
#toggler:checked ~ ol{
display:block;
}

#toggler ~ label .show,#toggler:checked ~ label .hide{
display:inline-block;
}
#toggler:checked ~ label .show,#toggler ~ label .hide{
display:none;
}
<p>Accordian Example</p>
<div>
<input id="toggler" type="checkbox" checked/>
<label for="toggler">
Toggle Accordion
<b class="show">[show]</b>
<b class="hide">[hide]</b>

</label>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>

关于CSS Accordion 菜单在 Chrome/Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37441411/

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