0

Jqueryを使用して、ネストされたドロップダウンメニューのcss3トランジション（マージン）アニメーションを制御しています。メニューのメイン部分でイベントをトリガーするリンクをクリックすると、ネストされたメニューをドロップダウンできます。同じトリガーをもう一度クリックすると、本来のドロップダウンが閉じます。しかし、すべてのドロップダウントリガーをクリックすると、すべてのドロップダウンメニューが同時に表示されます。

私が求めているのは、同じメインメニューで別のドロップダウントリガーをクリックしたときです。ドロップダウンの1つがすでに開いている場合、開いているドロップダウンは、新しいドロップダウンが開くときにJqueryで制御されるcss3トランジションを使用して閉じます。したがって、一度に開くことができるドロップダウンは1つだけです。

私はjqueryを初めて使用しますが、以下のjqueryがこれを行うための最良の方法ではないことを認識しています。正しい方向へのガイダンスは大歓迎です。

Jquery：

$(function() {  
    $("#drop1").click(function() {  
        $(".sub1").toggleClass("submenu");
    });  
});

$(function() {  
    $("#drop2").click(function() {  
        $(".sub2").toggleClass("submenu");
    });  
});

$(function() {  
    $("#drop3").click(function() {  
        $(".sub3").toggleClass("submenu");
    });  
});

CSS：

ul {width:100%; list-style: none; display:block;}

ul li {display:inline-block; width: 20%; height: 40px; float:left; background: #ccc; text-align:center;}

ul li a {display:block; width:100%; height: 40px; position:relative;}

.sub1, .sub2, .sub3 {width:300px; margin: -40px 0 0 0; position:absolute; z-index:-1;
transition: margin 0.2s ease; 
-moz-transition: margin 0.2s ease; 
-webkit-transition: margin 0.2s ease;
-o-transition: margin 0.2s ease;
-ms-transition: margin 0.2s ease;}

.submenu {margin:0; background: #666;}

.sub1 li, .sub2 li, .sub3 li {text-align:center; width: 33%;}

HTML：

<ul>
    <li>normal</li>
    <li><a id="drop1" href="#">drop</a>
        <ul class="sub1">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
    <li><a id="drop2" href="#">drop</a>
        <ul class="sub2">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
    <li>normal</li>
    <li><a id="drop3" href="#">drop</a>
        <ul class="sub3">
            <li>drop</li>
            <li>drop</li>
            <li>drop</li>
        </ul>
    </li>
</ul>
4

1 に答える 1

0

私はもっ​​と簡単な解決策を選びます、それがあなたに役立つことを願っています（私はそれをテストしました）。

この場合、ドロップダウンをアクティブにするリンクを同じクラスのすべてのメンバーにするために、コードを少し変更する必要がありますdrop。例えば：

<a id="drop1" href="#" class="drop">drop</a>

すべてのドロップダウンセレクター（＃drop1、＃drop2、＃drop3）に対してこれを行う必要があります。

次に、この関数を使用します。

$(function() {  
    $("a.drop").click(function() {  
    $('.submenu').not( $(this).next() ).toggleClass("submenu");
        $(this).next().toggleClass("submenu");
    });  
});

これが行うことは次のとおりです。

  1. サブメニューがすでに配置されているかどうか、およびこのサブメニューが現在クリックしているものではないかどうかを確認します。これにより、クリックしていないすべての要素が再び切り替わります（サブメニューが無効になります）（次の行で切り替えられるため）。これは、関数の最初の行で行われます。
  2. 次に、現在クリックされている要素のクラスを切り替えます。

メニューにはどの要素もサブメニューを表示していない状態があるため、両方の行が必要です。

この$(this).next()場合、サブメニューがクリックされた要素の次の要素であるため、が使用されます。つまり、その直後にクリックがアクティブになります。

于 2013-01-08T14:04:41.253 に答える