Question

我正在构建我的网站here，我希望我的左侧菜单在下拉菜单打开时向下移动，以便它们不会重叠。这是HTML代码：

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav nav-pills nav-stacked">
    <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
          <li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
        </ul>
    </li> 
    <li><a href="#bio" data-toggle="tab">BIO</a></li> 
    <li><a href="#contact" data-toggle="tab">CONTACT</a></li>
    <li><a href="#blablabla" data-toggle="tab">BLABLABLA</a></li> 
  </ul>
</div>

有人可以帮忙吗？谢谢！

fadein fadeout的Javascript问题

 $(document).ready(function(){
       $(".nav > li > a").bind("click", function(){
          $('.dropdown-menu').fadeOut();
          $(this).parent().find('.dropdown-menu').fadeIn(); 
       }); 
  });

Answer 1

您可以做的是覆盖类下拉菜单的css。我在检查员中所做的是.dropdown-menu删除样式

position:absolute;
float:left;


.dropdown-menu {
    position:relative !important; <-- or static
    float:none !important;
}

这会使下拉菜单有自己的空间，而不会将鼠标悬停在菜单的其余部分上。但是你的切换也有问题。它似乎被打破了。标记看起来很好。你有没有篡改javascript或什么？

所以对于你的javascript问题，测试它有点难，但试试这个：修订：基于http://getbootstrap.com/javascript/

$(document).ready(function() {
   $('.dropdown').on('show.bs.dropdown', function () {
     $('.dropdown-menu',this).fadeIn();
   });

   $('.dropdown').on('hide.bs.dropdown', function () {
      $('.dropdown-menu',this).fadeOut();
   });
}

Answer 2

您可以通过覆盖绝对定位和下拉切换的引导默认值来实现此目的：

.dropdown.open .dropdown-menu {
    display: block;
    position: static;
    float: none;
    width: 200px;
}

然后保持菜单打开，一点点JS：

$('#myTabDrop1').on('click', function(e) {
    // Remove active tab
    $('#myNavbar').find('nav > li.active').removeClass('active');
    $(this).parent().addClass('active').addClass('open');
});

新HTML

<div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav nav-pills nav-stacked">
        <li class="dropdown">
            <a href="#" id="myTabDrop1">PROJECTS</a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
                <li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
            </ul>
        </li> 
        <li><a href="#bio" data-toggle="tab">BIO</a></li> 
        <li><a href="#contact" data-toggle="tab">CONTACT</a></li>
        <li><a href="#blablabla" data-toggle="tab">BLABLABLA</a></li> 
    </ul>
</div>

JSFiddle

下拉菜单打开时，切换菜单

2 个答案: