Bootstrap下拉防止切換身體點擊？

Question

我有這個菜單，我的問題是，我需要它的行爲，以便它只在點擊父菜單項時切換。現在你可以通過點擊身體上的某個地方關閉下拉菜單，這不是我想要的行爲。只有在點擊父菜單項時，下拉菜單纔會關閉。可能？怎麼樣？

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

Answer 1

在文檔單擊而不是下拉元素時，您可以停止事件傳播：

$(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>

Answer 2

你需要停下來什麼，當用戶點擊該文件被解僱。加入這樣的事情您的JS後：

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