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

jQuery滑下导航

1 个答案: