引导下拉列表中的可单击选项卡和选项卡式内容

时间:2014-09-25 01:10:21

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

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

Runnable demo:http://plnkr.co/edit/YebYGXvjufHKwjvTBOl8

1 个答案:

答案 0 :(得分: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