Вертикальная скользящая панель навигации

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

Вам нужно изменить код, чтобы он был таким:

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

});

Answer 2

Это работает!

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

Мне кажется, это работает!

Я только что добавил эту строку кода "$ (" # 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>