php - 带有 JQuery 的时尚滑动菜单

Question

我正在使用带有 JQuery 的时尚滑动菜单。

<script type="text/javascript">
        $(function(){
        $('ul.child').hide();
        $('ul.parent a.slide').click(function(){
        $('ul.child').slideUp('slow');
        $(this).next().find('a').show();
        $(this).next().slideDown('fast');
        return false;
        });
        });
        </script>

        <ul class="parent">
        <li>
        <a href="#" class="slide">Title One</a>
        <ul class="child">
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
        <li><a href="#">Link Five</a></li>
        </ul>
        </li>
        </ul>

滑动菜单工作正常。但是在最后打开的“child ul”中打开后不会关闭。我必须在一段时间后重新设置。知道吗？

Answer 1

看到这个：http: //jsfiddle.net/fd46R/

 $(function(){
    $('ul.child').hide();
    $('ul.parent a.slide').click(function(){
    $('ul.child').slideUp('slow');
    $(this).next().find('a').show();
        if( $(this).next().is(':hidden') ) {
    $(this).next().slideDown('fast');
        }
    return false;
    });
    });​

Answer 2

请参阅这是打开 .child 并等待 1000 毫秒（1 秒）然后向上滑动的更新代码。

http://jsfiddle.net/fBYNy/3/

$(function() {
    $('ul.child').hide();
    $('ul.parent li').click(function() {
        $('ul.child',this).slideDown('slow').delay(1000).slideUp('fast');
    //                               -----^^^^^^^^^^---- this will slide 
    //                              the opened menu after 1 second of delay            
        $(this).next().children('.child').slideUp('fast');
        $(this).prev().children('.child').slideUp('fast');
        return false;
    });
});