Twitter Bootstrap cant stop a dropdown from closing on click

Question

I have looked at the other questions similar and tried many of the solutions, but none have worked. Here is the issue, this is a mini login form for the top banner. I need the button to not automatically close when you click in the fields. Here is my code:

    <script> 
    $(document).on('click', '.dropdown-menu', function(e){
        $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
    });
     </script>                 
    <div class="btn-group" >
      <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="cus-key"></i> Login
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu pull-right keep_open">
        <form action="clog.php" method="post" class="keep_open">
        <!-- dropdown menu links -->
          <li><input type="text" placeholder="Username..." class="keep_open" /></li>
          <li><input type="text" placeholder="Password..." class="keep_open"/></li>
          <li><input type="submit" name="submit" style="background-image: url('img/login.png'); width: 110px; height: 32px; cursor: hand; margin-top: -5px" value=" " /></li>
          <li><a href="/riders/register.php" ><span style="color: green; float: right" > Sign up for account<i class="icon-double-angle-right"></i></a></span></li>
         </form>
      </ul>
    </div>

it appears the stop propagation is not working. I added the class to just about everything in desperation! — srt8driver, Aug 19 '13 at 04:34
can you provide a [fiddle](http://jsfiddle.net) that replicates the issue? — omma2289, Aug 19 '13 at 05:02
http://jsfiddle.net/X5xTX/ (new to fiddle, not sure I got that right) — srt8driver, Aug 19 '13 at 05:13
http://jsfiddle.net/X5xTX/1/ I updated the fiddle to include bootstrap CSS, also I the stop propagation is working fine for me on Chrome 29 beta — omma2289, Aug 19 '13 at 05:41
Where should I put the javascript since its not firing on my page? — srt8driver, Aug 19 '13 at 06:25

score 18 · Answer 1 · answered Aug 19 '13 at 06:40

I figured it out. It was not inside the document ready function. (hat tip to Koala_dev) Javascript needs to be:

    <script type="text/javascript">

    $(document).ready(function() {
        $(document).on('click', '.dropdown-menu', function (e) {
            $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
        }); 
    });
    </script>

score 3 · Accepted Answer · answered Jun 11 '14 at 20:44

3

I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() }
);

You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, e.g. another class or another data property.

answered Jun 11 '14 at 20:44

Astockwell

1,498
13
11

This is the correct answer. [data-toggle="collapse"] can be replaced with the specific class of the menu AND 'body' (the dropdown also closes when you click anywhere within the BODY). e.g 'main_menu, body' – Steven Jun 03 '15 at 12:14

Twitter Bootstrap cant stop a dropdown from closing on click

2 Answers2

Linked