Jquery 引导中下拉菜单中的下拉按钮

我在Bootsrtap的下拉菜单中有一个下拉按钮。单击按钮时，将不显示其下拉项，并且父下拉列表将关闭。我如何克服这种行为？ 谢谢你
安迪
下面是一段代码片段。它是基于SB Admin 2的

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="fa fa-tasks fa-fw"></i><i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-tasks">
        <li>
            <div href="#" style="margin-right: 10px; margin-left: 10px">
                <p>
                    <strong>Pictures</strong>
                </p>
                <div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle" data toggle="dropdown" aria-expanded="false">
                            Save... <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li class="menu-save-to-comp"><a href="#">To Computer</a></li>
                            <li class="menu-save-to-gdrive"><a href="#">To Google Drive</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</li>

图片

拯救

不久前，我在bootstrap中需要一个多级下拉列表，我想出了以下代码片段：

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

我在代码中添加了几个类，并使用了以下javascript：

$(".nestedDrop").click(function(e){
    e.stopPropagation();
    $(this).next().toggle();
});

$('.parentDrop').on('hidden.bs.dropdown', function(e){
    $(this).find('.nestedDrop').next().hide();
});

对于这部分HTML代码

<li class="dropdown parentDrop">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">(click here for problem)<i class="fa fa-tasks fa-fw"></i><i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-tasks">
        <li>
            <div href="#" style="margin-right: 10px; margin-left: 10px">
                <p>
                    <strong>Pictures</strong>
                </p>
                <div>
                    <div class="btn-group">
                        <button type="button" class="nestedDrop btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            Now click this <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li class="menu-save-to-comp"><a href="#">To Computer</a></li>
                            <li class="menu-save-to-gdrive"><a href="#">To Google Drive</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</li>

图片

现在点击这个

如果你能摆弄一下你的非工作代码，那会很有帮助。她会告诉你的，举个非工作代码的例子。