2

I need to put a dropdown menu ... in a dropdown menu in Bootstrap 3. Here is what I tried : Demo.

enter image description here

Unfortunately, when I click on the the second dropdown, it is not displayed.

How can I display the second dropdown when clicking on it ? Then how (with JS or jQuery) could I handle the change of state of this 2nd dropdown?

HTML :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div>
            <ul class="nav navbar-nav">
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Edit</a>
                        </li>
                        <li><a href="#">Delete</a>
                        </li>
                        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Visible by friends<span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Visible by friends</a>
                                </li>
                                <li><a href="#">Visible by me only</a>
                                </li>
                                <li><a href="#">Visible by anyone</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
Improve this question
3
  • (I know that an answer could be : dropdown in a dropdown ? urrr, don't do that. But here I would like to study how to do it though). Commented Oct 10, 2014 at 21:52
  • 1
    This might help you out: stackoverflow.com/questions/18023493/… Commented Oct 10, 2014 at 21:56
  • Thanks @xaisoft, it is not far from my problem, but it is a little bit different. Here it is a submenu : bootply.com/86684 that is 1/ automatically displayed when hover 2/ is on the right... Instead of I would like : the submenu is displayed only on click + the submenu is displayed below, like a dropdown menu. Commented Oct 10, 2014 at 22:01

3 Answers 3

Reset to default
3

Add the following javascript:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');
});

Demo can be see here.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! It works, but then the result will be like "one big menu" : imgur.com/nRJqzJX... : we cannot distinguish the menu and the submenu. I would like to distinguish the menu and submenu, I don't see exactly how to do it... I would like such kind of submenu: imgur.com/7p0h2OM
1

You could try triggering the dropdown on the inner modal manually. See fiddle

Js:

$('.dropdown li').click(function (e) {
e.stopPropagation();
});
$('.dropdown-inner').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('open').trigger('shown.bs.dropdown');
});

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div>
        <ul class="nav navbar-nav">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a>

                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Edit</a>
                    </li>
                    <li><a href="#">Delete</a>
                    </li>
                    <li class="dropdown-inner"> <a href="#" class="dropdown-toggle-inner">Visible by friends<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Visible by friends</a>
                            </li>
                            <li><a href="#">Visible by me only</a>
                            </li>
                            <li><a href="#">Visible by anyone</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Improve this answer

6 Comments

The result will be like "one big menu" : imgur.com/nRJqzJX : we cannot distinguish the menu and the submenu. Any idea for solving this ? (see comment on other answer)
This can be solved using css, and customized to your specific purposes. See this fiddle for a general example.
Thanks @mark! Here is how I would like to do (I use a "button" for the inside dropdown) : jsfiddle.net/mmtx0zph/6 What JS should I add so that it's possible to open the inside button ?
I tried your code jsfiddle.net/mmtx0zph/7 with addClass('open') but here it does not work... Any idea ?
The reason it doesn't work is because you're triggering the 'open' on the wrong element. Try this fiddle
|
0

checkout http://www.bootply.com/71520 maybe duplicated with Bootstrap 3 dropdown sub menu missing

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.