jQuery向下滑动导航

jQuery slide down navigation

本文关键字：导航 jQuery      更新时间：2023-09-26

我试图构建一个简单的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');        
    });
});
});

现在，当我单击子导航滑出时，再次单击不会有任何作用，我需要它向上滑动。如果我点击另一个，我需要做的是将扩展的导航（如果有的话）向上滑动，然后将新的向下滑动，但这只是不想对我正确工作！它有缺陷，两者同时显示，有时不显示。

看到这个。。。

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

相关文章：