引导下拉菜单中的可点击选项卡和选项卡式内容答案

【问题标题】：Clickable tabs and tabbed content in bootstrap dropdown引导下拉菜单中的可点击选项卡和选项卡式内容
【发布时间】：2014-09-25 01:10:21
【问题描述】：

我正在尝试构建一个自定义引导程序“选择”，它可以显示选项卡而不是简单列表。所以我在下拉列表中包含了 tabs html，效果很好。问题是 - 如果不关闭整个下拉列表，我将无法切换选项卡或单击其中的内容。当然，我可以在单击时添加stopPropagation，这将防止下拉菜单隐藏，但是选项卡和选项卡内容的事件也不会传播。有人偶然发现了这个并有一个干净的解决方案吗？

可运行的演示：http://plnkr.co/edit/YebYGXvjufHKwjvTBOl8

【问题讨论】：

标签： javascript jquery twitter-bootstrap tabs twitter-bootstrap-3

【解决方案1】：

添加此脚本

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.nav', function (e) {
            $(this).hasClass('open') && e.stopPropagation();
        }); 
    });        
</script>

将open 类添加到您的nav

<ul role="tablist" class="nav nav-tabs open">

DEMO

【讨论】：