显示隐藏内容的Jquery
显示隐藏内容的Jquery
提问于 2014-07-08 21:21:32
这是我的笔：http://codepen.io/anon/pen/IszKj
我想要做的是，当我点击any status或any date时，我打开一个隐藏的div，它给出了一个选项列表。
我的问题是，我如何以最好的方式处理这个问题？
- 我是否有两个不同的div，然后打开与所单击的列表项相关的一个：
<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>- 我是否有一个div，并且只显示其中与该按钮相关的内容？
<div style="hidden">
<span id="status">...</span>
<span id="date">...</span>
</div>除此之外，我应该使用toggle还是传统的open / close函数。
如果JS被禁用，那么它可以降级就好了。
回答 3
Stack Overflow用户
发布于 2014-07-08 21:39:09
为你创建了一个提琴：
HTML：
<div style="display: block;
height: 40px;">
<ul id="filter">
<li>
<span>Any status▾</span>
<ul class="options">
<li>Option1</li>
<li>Option2</li>
</ul>
</li>
<li>
<span>Any date▾</span>
<ul class="options">
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
</ul>
CSS:
#filter, .options {
list-style-type: none;
}
.options {
display:none;
}
.options li {
cursor: pointer;
}JavaScript:
$('#filter li').click(function(){
$(this).find('.options').toggle();
});Stack Overflow用户
发布于 2014-07-08 21:29:03
display:hidden不是有效的css规则。您需要使用display:none
Stack Overflow用户
发布于 2014-07-08 21:38:24
如果你想保持可访问性，在用javascript加载站点时改变隐藏状态，如果你这样做了，拥有NoScript活动插件的用户可以在不丢失功能的情况下看到每个选项。使用NoScript的人往往不喜欢那些迫使他们停用NS才能正确使用它的网站。
对于你的解决方案，我建议使用两个单独的div，这样你就可以选择同时显示两个框，并有一个明确的样式版本，表明它们是分开的。添加一个像"optionbox“这样的类，然后把你的css规则放进去，而不是用#date, #status创建一个规则。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24632990
复制相关文章
相似问题
腾讯云开发者
