2

ここでの私の最初の質問なので、できるだけ簡潔にしようと思います。

私には一連のnav要素があり、そのうちのいくつかには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>

（これらのリストはネストできる可能性があり、ネストする必要があることはわかっていますが、これは自分で作成するのではなく継承したコードであり、スタイルに含まれる可能性のある他のものを台無しにしたくありません）。

つまり、私が欲しいのは、3番目、4番目、5番目のメインナビゲーションアイテムがクリックされたときに、対応するサブメニューがマージン左を使用してアニメーション化することです。

私は現在、jQuery.toggle()を使用してこの効果を達成しようとしています。これが私の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）サブメニューが表示されていて、別のサブメニュー項目をクリックすると、最初のサブメニューが表示されなくなり、新しいサブメニューがアニメーション化されるまでアニメーション化されます。これは機能しません。

私はそのように各サブメニューにクラスを追加/削除しようとしまし.activeた（ここでは説明のために1つだけですが、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のElementInspectorを再確認したところ、発生していないことがわかりました。を機能させてアニメーションを駆動するには、リンクを2回クリックする必要があります。toggle()

任意のアイデア/提案/解決策は非常にありがたいです。

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

ありがとう、

4

2 に答える 2

1

ムーアの答えは、現在の方法が機能しない理由を説明しています。以下はあなたの問題を解決するはずです。classNameプロパティで正規表現を使用すると、各アイテムを個別に設定しなくても、リスト内のすべてのアイテムにこれを適用できるようになります。

.activeまた、現在選択されているサブメニューにクラスを追加する前に、「非表示にするサブメニュー」をクエリすることに注意してください。これにより、表示するとすぐに非表示になりません。

$('.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/

于 2012-10-03T09:10:47.950 に答える
0

[調査]をクリックすると、調査サブメニューが表示されます。次に、[バージョン情報]をクリックすると、学習メニューが非表示になります（[バージョン情報]メニューが表示されます）。ここで、もう一度[調査]をクリックします。これは学習ボタンを2回クリックするだけなので、最後にクリックしたときとは逆になります。つまり、学習メニューを表示するときに学習サブメニューを非表示にします。

これは私のために働きます：

$('.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');
        }
    }
});
于 2012-10-01T22:40:10.083 に答える