我正在尝试使用带有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 & 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');
});
答案 0 :(得分:0)
我认为你应该删除这个CSS
.navbar-nav li:hover ul {
display: block;
}
它应该正常;)
它就像这样在悬停css上添加display:block到这个ul然后你使用了slideToggle()方法并删除了display:block thta为什么它隐藏在悬停上
安全效果使用此脚本:
$('.navbar-nav li').hover(function () {
$(this).addClass('current').find('ul').slideDown('slow')
},function() {
$(this).removeClass('current').find('ul').slideUp();
});