bootstrap modal not working in dropdown menu

Question

Bootstrap 3.3 not working moodal link in dropdown menu.

JSFiddle

<ul class="dropdown-menu" role="menu">
  <li><a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>

If I remove this line from js modal works perfect, but dropdown menu collapses after click. Dropdown menu must be opened.

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

Answer 1

This is what you should do to make modal show in dropwdown:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
    if ($(e.target).is('[data-toggle=modal]')) {
        $($(e.target).data('target')).modal()
    }
});

Demo: http://jsfiddle.net/wkc5md23/8/

Answer 2

Remove the jQuery function $('.dropdown-menu').click and make sure the dropdown menu is shown like this:

HTML

<ul class="list">
    <li class="item">
        <a href="">I am a item</a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>
            </li>
        </ul>
    </li>
</ul>

CSS

.list li ul {
    display: none;
}

Solution 1. Purely CSS, show dropdown on hover:

.list li:hover ul {
    display: block
}

Solution 2. Just jQuery, show dropdown by click:

Use a CSS class to show the dropdown:

.open { display: block }

And do this with jQuery:

$('.list li a').click(function(){
    $(this).next().toggleClass('open');
});