0

単純な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');        
    });
});

});

これで、サブナビゲーションをクリックするとスライドアウトしますが、もう一度クリックしても何も起こらないので、上にスライドする必要があります。別のナビゲーションをクリックすると、展開されたナビゲーション（存在する場合）を上にスライドさせてから、新しいナビゲーションを下にスライドさせる必要がありますが、正しく機能したくないだけです。バグがあり、両方が同時に表示され、表示されない場合があります。

4

1 に答える 1

2

これを参照してください...

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の例を参照してください

于 2013-02-22T15:44:17.520 に答える