jQuery .Toggle Woes.

Question

私の第一質問ここでの質問だから私はできるだけ簡潔になるようにします。

私は一連のnav要素を持っています。私の基本的な構造は次のとおりです。

    <nav role="navigation" class="primary-nav main-nav">
        <ul>
            <li><a href="index.php">home</a></li>
            <li class="about-item"><a href="#">about</a></li>
            <li class="study-item"><a href="#">study</a></li>
            <li class="apply-item"><a href="#">apply</a></li>
            <li><a href="people.php">people</a></li>
            <li><a href="shows.php">shows</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
    </nav>

    <!-- secondary navs -->
    <!-- about -->
    <nav role="navigation" class="sec-nav sec-nav-about">
        <ul>
            <li><a href="history.php">history</a></li>
            <li><a href="facility.php">facility</a></li>
            <li><a href="alumni.php">alumni</a></li>
            <li><a href="friends.php">friends</a></li>
            <li><a href="patrons.php">patrons</a></li>
            <li><a href="singers.php">singers</a></li>
        </ul>
    </nav>

    <!-- study -->
    <nav role="navigation" class="sec-nav sec-nav-study">
        <ul>
            <li><a href="foundation.php">foundation</a></li>
            <li class="study-undergrad-item"><a href="#">undergrad</a></li>
            <li class="study-postgrad-item"><a href="#">postgrad</a></li>
            <li><a href="parttime.php">part time</a></li>
            <li><a href="exams.php">exams</a></li>
            <li><a href="saturdayschool.php">saturday school</a></li>
            <li><a href="sundayschool.php">sunday school</a></li>
            <li><a href="summerschool.php">summer school</a></li>
        </ul>
    </nav>
<!-- apply -->
<nav role="navigation" class="sec-nav sec-nav-apply">
    <ul>
        <li><a href="loans.php">loans</a></li>
        <li><a href="auditions.php">auditions</a></li>
        <li><a href="fees.php">fees</a></li>
        <li><a href="exams.php">exams</a></li>
        <li><a href="saturdayschool.php">saturday school</a></li>
        <li><a href="sundayschool.php">sunday school</a></li>
        <li><a href="summerschool.php">summer school</a></li>
    </ul>
</nav>

.

（私はこれらのリストができることを知っています - そしてすべきです - 入れ子にすることができますが、これは私が自分自身を書いたよりもむしろ受け継いだコードです。

so - 私が望むのは、3番目、4番目、5番目のメインナビゲーション項目をクリックすると、対応するサブメニューはMargin-Leftを使用してアニメートします。

現在この効果を試して実現するためにjQuery navを使用しています。これが私のjQuery：です

$(document).ready(function(){
  $('.main-nav .about-item a').toggle (
    function(){
      $('.sec-nav-about').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-about').animate({marginLeft: "-250"}, 500);
    });

  $('.main-nav .study-item a').toggle (
    function(){
      $('.sec-nav-study').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-study').animate({marginLeft: "-250"}, 500);
    });
  $('.main-nav .apply-item a').toggle (
    function(){
      $('.sec-nav-apply').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-apply').animate({marginLeft: "-250"}, 500);
    });
  });

.

この時点まで、その罰金。しかし、私はこの点を超えてもらうことはできません。次のことを達成するためにコードを再作業する方法はわかりません：

1）各メインメニュー項目をクリックすると、サブメニューがある場合は、まだ表示されていない場合は、サブメニューがアニメートアウトします（これはうまく機能しています）。

2）サブメニューがすでに表示されている場合、そのメインメニュー項目がクリックされたら、サブメニューは表示されないまでアニメートします（これも機能しています）。

3）サブメニューが表示され、他のサブメニュー項目がクリックされた場合、最初のサブメニューはとの新しいサブを表示するまでアニメートします。メニューをアニメートします。この 作業

.toggle()クラスを各サブメニューに追加/削除しようとしました（例示の目的で、3つのサブメニューのすべてのすべてのサブメニューはそれらに適用されています）：

$('.main-nav .about-item a').toggle (
  function(){
    $('.active').animate({marginLeft: "-250"}, 500).removeClass('active');
    $('.sec-nav-about').animate({marginLeft: "480"}, 500).addClass('active');
  },
  function(){
    $('.sec-nav-about').animate({marginLeft: "-250"}, 500).removeClass('active');
  });
});

.

それで何が起こるのかは、それが機能し、それは時刻後に.activeクラスの削除/追加を停止します。私はChromeの要素のインスペクタでダブルチェックし、それが起こっているのを見ることができます。 .activeを作動させてアニメーションを運転するには、リンクを2回にクリックする必要があります。

任意のアイデア/提案/解決策は非常に感謝しています。

（スペルミ誤差のために編集）。

ありがとう、

Answer 1

ムーアの答えはなぜあなたの現在のメソッドがうまくいかない理由を説明しています。以下はあなたの問題を解決するべきです。ClassNameプロパティで正規表現を使用することは、それぞれを個別に設定することなく、リスト内のすべての項目にこれを適用できることを意味します。

また、現在選択されているサブメニューに.activeクラスを追加する前に、「非表示にする」の「Sub Menus」を照会することに注意してください。これは私たちがそれを示すとすぐにそれを隠すのを避けます。

$('.main-nav li').click(function() {
    var itemType = this.className.match(/(^| )([^ ]+)-item( |$)/);
    if(itemType != null) {
        itemType = itemType[2];
    }

    $secNavItem = $('.sec-nav-' + itemType);
    $subMenusToHide = $('.active');
    if(!$secNavItem.hasClass('active')) {
        $secNavItem
            .addClass('active')
            .animate({marginLeft: "480"}, 500);
    }

    $subMenusToHide
        .animate({marginLeft: "-250"}, 500)
        .removeClass('active');
});

.

このフィドルで作業するのが見えます： http://jsfiddle.net/et475/23/ [

Answer 2

[勉強]をクリックすると、調査サブメニューが表示されます。 その後、「about」をクリックして、スタディメニューを隠します（概要メニューを表示します）。 今、もう一度「勉強」をクリックしてください。これは調査ボタンをクリックするだけであるので、あなたがそれをクリックした最後の時間の反対方向を実行するつもりです。

これは私にとって機能します：

$('.main-nav .about-item a').click (function(){
    var $submenu = $('.sec-nav-about');
    // if the submenu you want isn't showing...
    if (!$submenu.hasClass('active')) {
        // if any other submenu is showing, hide it...
        if ($('.active').length > 0){
            $('.active').animate({marginLeft: "-250"}, 500, function(){
             // ...show submenu AFTER previous submenu is hidden
             $submenu.animate({marginLeft: "480"}, 500).addClass('active');
            }).removeClass('active');
        } else {
            // no submenus showing: simply display
            $submenu.animate({marginLeft: "480"}, 500).addClass('active');
        }
    }
});

.