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(); 
});