Question

我在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>

Answer 1

See this working example bootply

我在你的代码中添加了几个类并使用了这个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>

Answer 2

我需要在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();
    });
});

FIDDLE HERE

希望有所帮助。

亚历-Z

Bootstrap下拉菜单中的下拉按钮

2 个答案: