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

我正在尝试构建一个自定义引导“选择”，它可以显示选项卡而不是简单的列表。因此，我在下拉列表中包含了html标签，效果非常好。问题是，如果不关闭整个下拉列表，我无法切换选项卡或单击其中的内容。当然，我可以在单击时添加

stopPropagation

，这将防止下拉列表隐藏，但是选项卡和选项卡内容的事件也不会传播。有人偶然发现了这一点，并有一个干净的解决方案吗

可运行演示：

添加此脚本

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

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