垂直滑动导航栏

Question

我有一个垂直滑动菜单，但我缺少一些东西，不知道该怎么做。

• 我希望在页面加载/刷新时关闭所有子菜单项
• 当鼠标悬停在带有子菜单的链接上时，它会向下滑动，当鼠标悬停在带有子菜单的另一个链接上时，它会向上滑动。每次鼠标停止悬停在链接上时，我都需要它重新滑回

这是代码，谢谢

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

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

Answer 2

这似乎对我有用！

我刚刚添加了这行代码 "$("#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>

Answer 3

您需要将代码更改为如下所示：

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

});