Une liste déroulante à la fois - définir un drapeau

Question

Si vous cliquez sur les listes déroulantes sur ce site: http://ryanbent.com/ - Je veux que chacun de ces onglets à ouvrir seulement un à la fois. Si vous cliquez sur un, fermez l'autre. Je comprends l'idée derrière cela, j'ai envoyé une classe quand vous cliquez dessus, et j'essaie de passer par chacun d'eux, mais je ne peux pas sembler le faire fonctionner. Je pense que c'est mes sélecteurs. Mon code est ci-dessous:

function HideMenu(){ 
    //$('.open').stop().animate({'top':'-480px'},500,"linear"); 
    $('.open').slideUp(); 
    $(this).removeClass("open"); 
    $("#fuzz").fadeOut(); 
} 
function checkMenu(){ $('.open').slideUp(); } 
    $('#contact').toggle(function() { 
    checkMenu(); 
    $('#contact-pull').show().animate({'top':'-50px'}).addClass("open"); 
    //$('#contact-pull').slideDown(); 
}, function() { 
    HideMenu(); 
    $('#contact-pull').animate({'top':'-180px'}) 
});  
$('#about').toggle(function() { 
    checkMenu();   
    $('#about-pull').show().animate({'top':'55px'}).addClass("open");     
    // $('#about-pull').slideDown(); 
}, function() { 
    HideMenu(); 
    $('#about-pull').animate({'top':'-465px'}) 
});  
$('#portfolio').toggle(function(){ 
    checkMenu(); 
    $('#portfolio-pull').animate({'top':'75px'}).addClass("open"); 
}, function() { 
    HideMenu(); 
    $('#portfolio-pull').animate({'top':'-150px'}); 
}); 

Quelqu'un at-il des suggestions sur la façon dont je peux obtenir ce travail? J'ai lutté avec cela et ne peux pas sembler le faire fonctionner. Je mets le drapeau bien, mais je dois vérifier.

Answer 1

Vous pouvez adopter une approche plus propre où vous auriez pas à initialiser individuellement chaque élément de menu mais simplement modifier votre code existant, vous pouvez essayer quelque chose comme ceci:

function HideMenu(){ 
      $('.open').stop().animate({'top':'-180px'},500,"linear",function(){ 
        $(this).removeClass("open"); 
        $(this).hide(); 
      }); 
    } 

    $('#contact').toggle(function() { 
      $('#contact-pull').show().animate({'top':'-50px'}).addClass("open"); 
    }, function() { 
      HideMenu(); 
      $('#contact-pull').animate({'top':'-180px'}) 
      $("#fuzz").fadeOut(); 
    });  
    $('#about').toggle(function() { 
      var h = $('#about-pull').height(); 
      var new_t = h-380; 
      $('#about-pull').show().animate({'top':new_t}).addClass("open");     
    }, function() { 
      HideMenu(); 
      $('#about-pull').animate({'top':'-350px'}) 
      $("#fuzz").fadeOut(); 
    });  
    $('#portfolio').toggle(function() { 
      var h = $('#portfolio-pull').height(); 
      var new_t = h-70; 
      $('#portfolio-pull').animate({'top':new_t}).addClass("open"); 
    }, function() { 
      HideMenu(); 
      $('#portfolio-pull').animate({'top':'-150px'}) 
      $("#fuzz").fadeOut(); 
    }); 

Les changements que j'ai fait étaient les suivants:

• Vous n'avez pas besoin d'appeler "HideMenu" dans une boucle à chaque fois que la fonction peut simplement trouver le menu (ouvert) approprié et le fermer.
• Vous sembliez utiliser à la fois "open" et "openMenu" comme noms de classe dans votre code, je l'ai changé pour utiliser simplement "open".
• Vous n'appeliez pas la fonction HideMenu dans le gestionnaire pour #about car il n'y avait pas() après.
• Vous n'étiez pas même essayer d'appeler la fonction HideMenu dans le gestionnaire pour #portfolio

it helps - Je ne l'ai pas testé, juste corrigé les erreurs qui ont sauté sur moi :)