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

当用户点击文档时，您需要停止被触发的任何内容。在你的JS之后添加这样的东西：

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

Answer 2

您可以在单击文档时停止事件传播，但不能在下拉元素上停止：

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap下拉列表会阻止身体点击切换？

2 个答案: