Question

我想要做的是当我点击any status或any date时，我打开一个隐藏的div，它会给出一个选项列表。

我的问题是，我该如何以最佳方式解决这个问题？

我是否有两个不同的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被禁用，那么它可以降级。

Answer 1

为您创建了一个小提琴：

http://jsfiddle.net/e4mQD/1/

<强> 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();
});

Answer 2

display:hidden 是无效的CSS规则。您需要使用display:none

Answer 3

如果您想要记住可访问性，请在使用javascript加载网站时更改隐藏状态，如果您执行具有NoScript活动等加载项的用户，则可以在不丢失功能的情况下查看每个选项。使用NoScript的人倾向于不喜欢强制他们停用NS以便正确使用它的网站。

对于你的解决方案，我建议使用两个单独的div，你可以选择同时显示这两个框，并且有一个明确的样式版本，这些是分开的。添加类似＆＃34;选项框＆＃34;对这些并将你的css规则放在那里，而不是用#date, #status

制定规则

Answer 4

我的问题是，我该如何以最佳方式解决这个问题？

在您的特定用例中，最好为每个选项使用不同的块。

事实上，正如@ mh-itc指出的那样，如果你在ul s内使用嵌套列表，即div而不是li，那就更好了。

此外，您可以使用a代替span。

如果JS被禁用，那么它可以降级。

这可以通过推迟display:none;直到加载并运行JavaScript来实现。

演示：http://jsfiddle.net/abhitalks/928Dj/

标记：

<div>
    <ul id="filter">
        <li>
            <a href="#" class="dropdown">Any status ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Status 1</label></li>
                <li><label><input type="checkbox" />Status 2</label></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown">Any date ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Date 1</label></li>
                <li><label><input type="checkbox" />Date 2</label></li>
            </ul>
        </li>
    </ul>
</div>

CSS ：

ul {
    margin: 0; padding: 0;
    list-style: none;
}
#filter {
    display: inline-block;
}
#filter > li {
    display: inline-block;
    margin-bottom: 12px;
    padding-right: 12px;
    vertical-align: top;
}
ul.opt.hidden {
    display: none;
}

jQuery代码：

// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
      $(this).next('ul').toggle();
});

注意：在演示中，取消注释JavaScript代码，以了解JavaScript可用时的行为方式。并注释掉当JavaScript无法使用时它会如何降级。

Jquery显示隐藏的内容

4 个答案: