jQuery.toggle woes.

Question

La mia prima domanda qui, quindi cercherò di essere il più conciso possibile.

Ho una serie di elementi nav, alcuni dei quali hanno sub-elementi nav. La mia struttura di base è:

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

.

(Conosco che questi elenchi potrebbero - e dovrebbero essere annidati ma questo è il codice che ho ereditato piuttosto che scritto me stesso e non voglio avvitare con nient'altro che potrebbe essere negli stili).

Allora - Quello che voglio è quando vengono cliccarono il 3 °, 4 ° e 5 ° articolo principale, il loro sottomenu corrispondente anima con margine-sinistra.

Attualmente sto usando jquery .toggle() per cercare di ottenere questo effetto. Ecco la mia 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);
    });
  });

.

fino a questo punto, la sua multa. Tuttavia, non posso andare oltre questo punto. Non ho idea di come ri-lavorare il codice per ottenere quanto segue:

1) Quando si fa clic su ciascuna voce di menu principale, se ha un sottomenu e se non viene già visualizzato, il sottomenu cui si anima (questo funziona bene).

2) Se un sottomenu viene già visualizzato, quindi quando si fa clic sulla sua voce di menu principale, il sottomenu cui si anima fino a quando non viene visualizzato (questo funziona).

3) Se è visualizzato un sottomenu secondario e un'altra voce di menu si fa clic sull'elemento del menu secondario, il primo sottomenu si anima fino a quando non viene visualizzato e il nuovo sub- il menu anima. Questo non funzionante.

Ho tentato di aggiungere / rimuovere una classe .active a ciascun sottomenu come così (solo uno qui a scopo illustrativo, ma tutti e tre i sottomenu hanno applicato a loro):

$('.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');
  });
});

.

Allora ciò che accade è che, sembra funzionare e poi dopo un po ', interrompe la rimozione / aggiunta della classe .active. Ho ricontrollato nell'ispettore elemento di Chrome e può vederlo (non) che accadono. Ho bisogno di fare clic sui collegamenti due volte per ottenere il toggle() per funzionare e guidare l'animazione.

Qualsiasi idea / suggerimenti / soluzioni sarebbe molto grattuosamente apprezzata.

(modificato per errori di ortografia).

Grazie,

Answer 1

La risposta di Moore spiega perché il tuo metodo attuale non funziona.Quanto segue dovrebbe risolvere il tuo problema.L'utilizzo della regex sulla proprietà di ClassName significa che possiamo applicarlo a tutti gli elementi nell'elenco senza dover impostare ciascuno singolarmente.

Inoltre, notare che interrogiamo i "sottomenti menu per nascondere" prima di aggiungere la classe .active al sottomenu attualmente selezionato;Questo evita di nasconderlo non appena lo mostriamo.

$('.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');
});

.

Puoi vederlo lavorare in questo violino: http://jsfiddle.net/et475/23/

Answer 2

Quando fai clic su "Studia" mostra il sottomenu dello studio. Quindi fai clic su "About" e nasconde il menu dello studio (mostra il menu About). Ora fai clic su "Studia" di nuovo.Questo è solo il secondo clic sul pulsante Studio, quindi faceva il contrario dell'ultima volta che hai cliccato: cioè nascondere il sottomenu dello studio quando vuoi che mostri il menu di studio.

funziona per me:

$('.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');
        }
    }
});

.