Javascript 当使用没有CSS的JS时，如何隐藏twitter引导下拉列表？

我不想在我的项目中包括引导，但我想单独使用下拉插件。我之所以选择Bootstrap's one，是因为它是一款健壮且相对不复杂的产品（我只需要基本的功能——完美地工作，而不是任何额外的功能）

我试图使下拉css尽可能接近引导的css，但当我在下拉菜单外单击时，菜单拒绝隐藏

HTML:

CSS:

在JSFIDLE上：

试试这个

        <script>
        $(document).ready(function () {
            $(".dropdown").on('click', function () {
                $(".dropdown-menu").toggle("slow");
            });
        });
        $(".dropdown").on("click", function (event) {
            event.stopPropagation();
        });
        $(document).on("click", function () {
            $(".dropdown-menu").toggle("slow");
        });
        </script>

$（文档）.ready（函数（）{
$（“.dropdown”）。在（'click'，函数（）{
$（“.dropdown menu”）。切换（“慢速”）；
});
});
$（“.dropdown”）。在（“单击”上，函数（事件）{
event.stopPropagation（）；
});
$（文档）。打开（“单击”，函数（）{
$（“.dropdown menu”）。切换（“慢速”）；
});

演示

---

当我不使用手动触发器时，这似乎起作用，因此我删除了这一行：

$('#top_links').find("li.dropdown > a").dropdown()

并将

数据切换

属性添加到链接：

<a href="#" data-toggle="dropdown">Menu</a>

现在可以工作了：

---

然而，您认为这是引导中的错误吗？它打算像我尝试的那样工作吗？

谢谢你的解决方案。不过，这应该可以通过Bootstrap（）实现。如果您有多个下拉列表（如

$（“.dropdown menu”）。toggle（“slow”）；

将所有下拉列表都设置为目标，因此当您单击外部时，它们会随机切换），这也会造成混乱。请不要使用类作为选择器，请尝试使用此id。否，抱歉，这意味着我必须为每个下拉列表复制代码。它不灵活，它不是正确的代码！我通过不使用任何javascript解决了这个问题，请参见我的答案。

        <script>
        $(document).ready(function () {
            $(".dropdown").on('click', function () {
                $(".dropdown-menu").toggle("slow");
            });
        });
        $(".dropdown").on("click", function (event) {
            event.stopPropagation();
        });
        $(document).on("click", function () {
            $(".dropdown-menu").toggle("slow");
        });
        </script>

$('#top_links').find("li.dropdown > a").dropdown()

<a href="#" data-toggle="dropdown">Menu</a>