2

I am creating a navbar for my site with Twitter Bootstrap. I usually use the Dropdown plugin for creating menus with multiple menu-items; but for the menus that I don't want to close unless intentionally done so (e.g. Search box [1]), I use the collapse plugin to create a collapsible menu.

To give you an idea, here's a skeleton of the navbar's markup:

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="/">...</a>
    </div>

    <div class="collapse navbar-collapse">

        <!-- Dropdown Menu -->
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="/categories/" class="dropdown-toggle" data-toggle="dropdown">Categories</a>
                <ul class="dropdown-menu">
                    <li><a href="/tech/">Tech</a></li>
                    <li><a href="/autos/">Autos</a></li>
                    <li><a href="/travel/">Travel</a></li>
                </ul>
            </li>
        </ul>

        <!-- Collapsible Menu -->
        <ul class="nav navbar-nav navbar-right">
            <li id="nav-search" class="collapsible-menu">
                <a data-toggle="collapse" data-target="#nav-searchform" class="collapsed" href="#">Search</a>
                <div id="nav-searchform" class="collapse">
                    <!-- Search Form -->
                </div>
            </li>
        </ul>

    </div>
</nav>

Please note the comments <!-- Dropdown Menu --> and <!-- Collapsible Menu --> in the code above, which denote the dropdown and collapsible menus respectively.

Problem: If the collapsible menu (which doesn't close unless the menu is clicked again) is open, and user clicks on one of the dropdown menus, both menus are open. I want the collapsible menu to automatically close when the dropdown menu is opened.

How do I do it (with jQuery)?

I've tried these, among others, but none seem to work:

jQuery(document).ready(function($){

    $('.dropdown-toggle').click(function() {
        $(this).closest('#nav-search').toggleClass('selected');
    });

});

and

jQuery(document).ready(function($){

    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().toggleClass('in');
    });

});

and

jQuery(document).ready(function($){

    $('.dropdown-toggle').on('show.bs.dropdown', function () {
        $(this).closest('#nav-search').children().removeClass('in');
    });

});

I am not sure what I am doing wrong.

Footnotes:

  1. If I use Bootstrap's Dropdown plugin for search box too, the dropdown'd close when the user clicks on the input/text area which is why I chose to go with the Collapse plugin.
its_me
  • 10,998
  • 25
  • 82
  • 130
  • Can you reproduce the issue and create your example here http://www.bootply.com/ ? – Trevor Oct 31 '13 at 20:35
  • @Trevor Here you go: http://www.bootply.com/91253 -- I haven't added the custom jQuery code (which didn't work) shown in my question. – its_me Oct 31 '13 at 20:55
  • FYI, you can use `$( '.dropdown-menu input' ).click(function(){ return false; });` to prevent the behavior of the menu closing when you click into the input box. From http://stackoverflow.com/questions/17907275/add-search-box-in-twitters-bootstrap-button-dropdown-list-to-select-the-items – Sean Adams-Hiett Jan 28 '14 at 20:48

1 Answers1

2
$('.dropdown').click(function(){
      if($('#nav-searchform').hasClass('in'))
        $('#nav-searchform').collapse('hide');
});

http://www.bootply.com/122096

Mirzhan Irkegulov
  • 17,660
  • 12
  • 105
  • 166
Trevor
  • 16,080
  • 9
  • 52
  • 83