Javascript 显示隐藏内容的Jquery

这是我的钢笔：

我想做的是，当我点击任何状态或日期时，我会打开一个隐藏的div，它给出了一个选项列表

我的问题是，我如何以最好的方式处理这个问题

我是否有两个不同的div，然后打开与单击的列表项相关的div： 备选方案1备选方案2 备选方案1备选方案2 我是否有一个div，并且只显示其中与该按钮相关的内容？ ... ... 除此之外，我应该使用切换还是传统的打开/关闭功能

如果JS被禁用，它将是可降解的。显示：隐藏

---

不是有效的css规则。如果您想记住可访问性，则需要使用display:none

在使用javascript加载站点时更改隐藏状态，如果您这样做，则具有NoScript active等加载项的用户可以在不丢失功能的情况下查看每个选项。 使用NoScript的人往往不喜欢那些迫使他们停用NS以正确使用它的网站

对于您的解决方案，我建议使用两个单独的div，这样您就可以选择同时显示两个框，并且有一个样式化的版本来明确这两个框是分开的。 在这些中添加一个类似optionbox的类，并将您的css规则扔到其中，而不是创建一个带有日期、状态的规则，为您创建了一个小提琴：

HTML:

JavaScript:

我的问题是，我如何以最好的方式处理这个问题

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

事实上，正如@mh itc所指出的，如果您在这些lis中使用嵌套列表（即ul）而不是div，则会更好

此外，您可以使用一个而不是跨度

如果JS被禁用，它将是可降解的

这可以通过延迟显示来实现：无；直到加载并运行JavaScript

演示：

标记：

jQuery代码：

---

注意：在演示中，取消对JavaScript代码的注释，以查看当JavaScript可用时它的行为。并进行注释，查看当JavaScript不可用时它会如何退化。

是否动态加载内容？有什么情况下你想同时显示这两个分区吗？我不会动态加载内容，也没有任何情况下我想让bothIt完全了解你想如何显示它…我认为显示单独分区和显示普通分区并在其中显示内容在性能上不会有太大差异。。特别是在小范围内。如果您使用引导，您也可以将隐藏的类添加到元素中。感谢您的更正，但这仍然无法帮助我实现这就是我对解决方案发表评论的原因，提供OP在解决方案中可能没有考虑到的信息。这是可行的，但不允许使用非唯一的id，请使用类而不是id谢谢您的提示。非常愚蠢的错误，我纠正了它：这里有一个改进的版本，因为原始版本有一些缺点，比如当你点击一个选项时触发切换，当这些是复选框或radios@Jimmy还有一个解决方法是使用输入复选框而不是JS/jQuery：工作来自IE9+

<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> 

#filter, .options {
  list-style-type: none;
}

.options {
  display:none;
}

.options li {
    cursor: pointer;
}

$('#filter li').click(function(){
  $(this).find('.options').toggle();
});

<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>

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;
}

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