CODEWITHSUNDEEP
jquerytwitter-bootstrapdropdown
iamfredrik
iamfredrik

Reputation: 340

Bootstrap dropdown prevent toggle on body click?

I have this menu and my problem is that I need it to behave so that it only toggles when clicking on the parent menu items. Right now you can close the dropdown by clicking somewhere on the body, which is not the behaviour I want. The dropdown should only close when clicking on the parent menu item. Possible? How?

Html:

<div class="navigation">
  <ul class="menu nav">
    <li class="first expanded dropdown"><span title="" class="active-trail dropdown-toggle nolink" data-target="#" data-toggle="dropdown">Ekonomiförvaltning <span class="caret"></span></span>
      <ul class="dropdown-menu">
        <li class="first leaf"><a href="#" title="">Ekonomiförvaltning</a></li>
        <li class="leaf"><a href="#" title="">Redovisningstjänster</a></li>
        <li class="leaf"><a href="#" title="">Controller-tjänst</a></li>
        <li class="leaf"><a href="#" title="">Disponenttjänster</a></li>
        <li class="leaf"><a href="#" title="">Skatterådgivning &amp; lagtjänster</a></li>
        <li class="last leaf"><a href="#" title="">Företagsförvärv</a></li>
      </ul>
    </li>
    <li class="expanded dropdown"><span title="" data-target="#" class="dropdown-toggle nolink" data-toggle="dropdown">Lönehantering <span class="caret"></span></span>
      <ul class="dropdown-menu">
        <li class="first leaf"><a href="#" title="">Lönehantering</a></li>
        <li class="leaf"><a href="#" title="">Löneberäkning</a></li>
        <li class="leaf"><a href="#" title="">HR-tjänster</a></li>
        <li class="last leaf"><a href="#r" title="">Reseräkningar</a></li>
      </ul>
    </li>
    <li class="last expanded dropdown"><span title="" data-target="#" class="dropdown-toggle nolink" data-toggle="dropdown">Programvaror <span class="caret"></span></span>
      <ul class="dropdown-menu">
        <li class="first leaf"><a href="#" title="">Programvaror</a></li>
        <li class="leaf"><a href="#" title="">Löneprogram</a></li>
        <li class="leaf"><a href="#" title="">ERP-affärssystem</a></li>
        <li class="last leaf"><a href="#" title="">Personaladministration</a></li>
      </ul>
    </li>
  </ul>
  </div>

Jquery:

$('.dropdown').on('show.bs.dropdown', function () {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
      $(this).find('a.dropdown-toggle').removeAttr('data-toggle');
    });
    $('.dropdown').on('hide.bs.dropdown', function (){
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });

See fiddle

Upvotes: 2

Views: 2732

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

You can stop event propagation when clicking on document but not on a dropdown element:

$(document).on('click', ':not(.dropdown)', function(e) {
  if ($(this).closest('.dropdown').length == 0) {
      //
      // if on doc and not on a dropdown....
      //
      e.stopPropagation();
  }
});




$('.dropdown').on('show.bs.dropdown', function () {
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  $(this).find('a.dropdown-toggle').removeAttr('data-toggle');
});
$('.dropdown').on('hide.bs.dropdown', function (){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="navigation">
    <ul class="menu nav">
        <li class="first expanded dropdown"><span title="" class="active-trail dropdown-toggle nolink" data-target="#" data-toggle="dropdown">Ekonomiförvaltning <span class="caret"></span></span>
            <ul class="dropdown-menu">
                <li class="first leaf"><a href="#" title="">Ekonomiförvaltning</a></li>
                <li class="leaf"><a href="#" title="">Redovisningstjänster</a></li>
                <li class="leaf"><a href="#" title="">Controller-tjänst</a></li>
                <li class="leaf"><a href="#" title="">Disponenttjänster</a></li>
                <li class="leaf"><a href="#" title="">Skatterådgivning &amp; lagtjänster</a></li>
                <li class="last leaf"><a href="#" title="">Företagsförvärv</a></li>
            </ul>
        </li>
        <li class="expanded dropdown"><span title="" data-target="#" class="dropdown-toggle nolink" data-toggle="dropdown">Lönehantering <span class="caret"></span></span>
            <ul class="dropdown-menu">
                <li class="first leaf"><a href="#" title="">Lönehantering</a></li>
                <li class="leaf"><a href="#" title="">Löneberäkning</a></li>
                <li class="leaf"><a href="#" title="">HR-tjänster</a></li>
                <li class="last leaf"><a href="#r" title="">Reseräkningar</a></li>
            </ul>
        </li>
        <li class="last expanded dropdown"><span title="" data-target="#" class="dropdown-toggle nolink" data-toggle="dropdown">Programvaror <span class="caret"></span></span>
            <ul class="dropdown-menu">
                <li class="first leaf"><a href="#" title="">Programvaror</a></li>
                <li class="leaf"><a href="#" title="">Löneprogram</a></li>
                <li class="leaf"><a href="#" title="">ERP-affärssystem</a></li>
                <li class="last leaf"><a href="#" title="">Personaladministration</a></li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 2

Daniel O&#39;Connell
Daniel O&#39;Connell

Reputation: 41

You need to stop anything being fired when a user clicks the document. Add something like this after your JS:

$(document).on('click', function(e) {
    $('.dropdown').find('.dropdown-menu').stop();
});

Upvotes: 0

Related Questions