javascript - jQuery 向下滑动导航

Question

我正在尝试构建一个简单的 jQuery 向下滑动导航，但在打开和关闭导航时遇到一些问题。

我的导航如下。

<ul id="nav">
<li>home</li>
<li class="parent">Clothing
    <ul>
        <li>child</li>
        <li>child</li>
        <li>child</li>
    </ul>
</li>
<li class="parent">shoes
    <ul>
        <li>child</li>
        <li>child</li>
        <li>child
                       <ul>
                          <li>child child</li>
                       </ul>
                    </li>
    </ul>
</li>

使用以下 jquery

var $j  =   jQuery.noConflict();

$j(document).ready(function() {


$j('#nav').children('.parent').click(function(e){
    e.preventDefault();
    $this = $j(this);
    $j('#nav').children('.parent').children('ul').stop().slideUp('slow', function(){
        $this.children('ul').stop().slideToggle('slow');        
    });
});

});

现在，当我单击子导航滑出时，再次单击不会执行任何操作，我需要它重新滑回。如果我单击另一个，我需要发生的事情是让扩展的导航(如果有)向上滑动，然后新的导航向下滑动，但它只是不想为我正常工作!它有问题，并且同时显示，有时不显示。

Answer 1

看这个...

var $j  =   jQuery.noConflict();

$j(document).ready(function() {
    $j('#nav > .parent').on('click', function(e){
        e.preventDefault();
        $j('#nav > .parent').children().stop().slideUp('slow');
        $j(this).children().stop().slideToggle('slow');
    });
});

查看此jSfiddle example