我有一个垂直滑动菜单,但有一些我缺少的东西,不知道该怎么做。
这是代码和谢谢
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type='text/javascript'>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#secondpane li.menu-item").mouseover(function(){
$(this).next("li.menu_body").slideDown(500).siblings("li.menu_body").slideUp("slow");
});
});
</script>
<div class="menu-container">
<ul id="secondpane">
<li><a href="#">home</a></li>
<li class="menu-item"><a href="#">about us</a></li>
<li class="menu_body"><ul>
<li class="menu-item"><a href="#">testimonials</a></li>
<li class="menu-item"><a href="#">full width page</a></li>
</ul></li>
<li class="menu-item"><a href="#">blog</a></li>
<li class="menu_body"><ul>
<li class="menu-item"><a href="#">web design</a></li>
<li class="menu-item"><a href="#">illustrations</a></li>
<li class="menu-item"><a href="#">art inspiration</a></li>
</ul></li>
<li class="menu-item"><a href="#">portfolio</a></li>
<li class="menu-item"><a href="#">contact</a></li>
</ul>
</div>
答案 0 :(得分:1)
这似乎对我有用!
我刚添加了这行代码“$(”#secondpane li.menu-item“)。siblings(”li.menu_body“)。hide();”
<script type='text/javascript'>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#secondpane li.menu-item").siblings("li.menu_body").hide();
$("#secondpane li.menu-item").mouseover(function(){
$(this).next("li.menu_body").slideDown(500).siblings("li.menu_body").slideUp("slow");
});
});
</script>
<div class="menu-container">
<ul id="secondpane">
<li><a href="#">home</a></li>
<li class="menu-item"><a href="#">about us</a></li>
<li class="menu_body"><ul>
<li class="menu-item"><a href="#">testimonials</a></li>
<li class="menu-item"><a href="#">full width page</a></li>
</ul></li>
<li class="menu-item"><a href="#">blog</a></li>
<li class="menu_body"><ul>
<li class="menu-item"><a href="#">web design</a></li>
<li class="menu-item"><a href="#">illustrations</a></li>
<li class="menu-item"><a href="#">art inspiration</a></li>
</ul></li>
<li class="menu-item"><a href="#">portfolio</a></li>
<li class="menu-item"><a href="#">contact</a></li>
</ul>
</div>
答案 1 :(得分:1)
您需要将代码更改为:
$(document).ready(function(){
$("#secondpane li.menu-item").hover(function(){
$("li.menu_body").slideUp(500);
$(this).next("li.menu_body").slideDown(500);
}, function(){
$("li.menu_body").slideUp(500);
});
});
答案 2 :(得分:1)
这有效!
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<style>
li {list-style: none;}
</style>
<script type='text/javascript'>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#secondpane li.menu-item ul").hide();
$("#secondpane li.menu-item").hover(function(){
$(this).children("ul").slideDown(500);
},function(){
$(this).children("ul").slideUp(500);
});
});
</script>
<div class="menu-container">
<ul id="secondpane">
<li><a href="#">home</a></li>
<li class="menu-item"><a href="#">about us</a>
<ul>
<li><a href="#">testimonials</a></li>
<li ><a href="#">full width page</a></li>
</ul></li>
<li class="menu-item"><a href="#">blog</a>
<ul>
<li><a href="#">web design</a></li>
<li><a href="#">illustrations</a></li>
<li><a href="#">art inspiration</a></li>
</ul></li>
<li class="menu-item"><a href="#">portfolio</a></li>
<li class="menu-item"><a href="#">contact</a></li>
</ul>
</div>