Dropdown button in a dropdown menu in Bootstrap

Question

I have a a dropdown button in a dropdown menu in Bootsrtap. When the button is clicked its dropdown items are not displayed and the parent dropdown closes. How do I override that behavior? Thank you
Andy
Here is a code snippet. It is based on 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>

It would help if you could set up a fiddle with your non-working code. — steve klein
– steve klein, Commented May 1, 2015 at 17:17

Ted · Accepted Answer · 2015-05-01 17:35:56Z

See this working example bootply

I added a couple classes to your code and used this javascript:

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

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

For this part of the HTML code

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

Zoe - Save the data dump · Accepted Answer · 2019-06-04 20:53:25Z

I needed a multi level dropdown in bootstrap , not very long ago and i came up with the following snippet :

$(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

Collectives™ on Stack Overflow

Dropdown button in a dropdown menu in Bootstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related