jquery - SlideToggle 对 Bootstrap 下拉菜单有相反的效果

Question

我正在尝试使用带有 Twitter Bootstrap 的 SlideToggle 和 jQuery 中的 SlideToggle 方法制作下拉导航菜单，但我想要的行为与我想要的完全相反。它应该简单地在悬停时向下滑动，并在鼠标悬停时向上滑动。

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#about">Company</a>

                    <ul class="sub-menu">
                        <li><a href="http://sc-arch.com/company/">About Us</a>
                        </li>
                        <li><a href="http://sc-arch.com/media/">Media</a>
                        </li>
                        <li><a href="http://sc-arch.com/brochures/">Brochures</a>
                        </li>
                        <li><a href="http://sc-arch.com/news-events/">News &amp; Events</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#services">Services</a>
                </li>
                <li><a href="#contact">Projects</a>

                    <ul class="sub-menu">
                        <li><a href="http://sc-arch.com/project-category/addition-renovation/">Addition/ Renovation</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/civiccommunity/">Civic/Community</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/education-collegeuniversity/">Education: College/University</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/education-k-12/">Education: K – 12</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/historical/">Historical</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/in-planning/">In Planning</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/interior-architecture/">Interior Architecture</a>
                        </li>
                        <li><a href="http://sc-arch.com/project-category/leed/">LEED</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#about">Clients</a>
                </li>
                <li><a href="#services">Philosophy</a>
                </li>
                <li><a href="#contact">Awards</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

CSS：

import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

body {
    margin-top: 60px;
    background-color: #000;
    font-family: Calibri, Arial, sans-serif;
}
.navbar {
    height: 100px;
}
.navbar-inverse {
    background-color: #000;
}
.navbar-brand {
    background-image: url(../assets/logo.png);
    background-repeat: no-repeat;
    width: 188px;
    text-indent: -9999px;
}
.navbar-nav {
    float:right;
}
.navbar-nav > li {
    display: inline-block;
    float: left;
}
.navbar-nav ul {
    display: none;
    position: absolute;
    color: #fff;
    list-style-type: none;
    background-color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}
.navbar-nav li:hover ul {
    display: block;
}
.navbar-nav li ul li a:hover {
    text-decoration: none;
    color: #fff;
}
.navbar-nav a {
    color: #999;
}

jQuery :

$('.navbar-nav li').hover(function () {
    $(this).toggleClass('current').find('ul').stop().slideToggle('fast');
});

小提琴

Answer 1

我认为你应该删除这个 CSS

.navbar-nav li:hover ul {
    display: block;
}

它应该可以正常工作；）

它在悬停时像这样工作 css 正在向这个 ul 添加 display:block ，接下来你使用 slideToggle() 方法，它删除了 display:block 这就是它隐藏在悬停时的原因

示例http://jsfiddle.net/tN7KA/

为了安全起见，请使用此脚本：

$('.navbar-nav li').hover(function () {
    $(this).addClass('current').find('ul').slideDown('slow')
        },function() {
            $(this).removeClass('current').find('ul').slideUp();
  });