Est-ce la meilleure façon de faire cela?

Question

J'ai une barre de navigation qui a deux listes déroulantes (comme ul's imbriqués). J'essaye de basculer les subnavs quand son parent est cliqué. Ou masquer une sous-navigation lorsque l'autre parent est cliqué. Voici le balisage:

<div id="nav-bar"> 
    <a href="#">A link</a> | 
    <ul> 
    <li id="feedback"> 
     <a href="javascript:void(0);">Feedback</a> 
     <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
     </ul> 
    </li> 
    </ul> | 
    <a href="#">Another link</a> | 
    <ul> 
    <li id="location"> 
     <a href="javascript:void(0);">Pick your location</a> 
     <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Et le code:

//hide the subnavs and give them a little down arrow 
$('ul.subnav').hide().parent().append('<small>&#9660;</small>'); 

// show its subnav when clicked 
$('#nav-bar ul li').click(function() { 
    var subnav = $(this).children('ul.subnav'); 
    // hide the other's subnav if it's visible 
    if ($(this).attr('id') == 'location') { 
    subnav.toggle(); 
    $('li#feedback').children('ul.subnav').hide(); 
    } else { 
    subnav.toggle(); 
    $('li#location').children('ul.subnav').hide(); 
    } 
}); 

Encore un novice à JS et jQuery, je voudrais savoir s'il y a une façon moins détaillée pour accomplir ce que je suis en train de faire ci-dessus. Edit: Une meilleure question est, est-il un moyen de le faire sans avoir à donner explicitement le li's un ID?

Answer 1

Un meilleur format serait quelque chose comme ceci pour votre HTML:

<ul id="nav-bar"> 
    <li><a href="#">A link</a> |</li> 
    <li> 
    <a href="#">Feedback</a> | 
    <ul class="subnav"> 
     <li><a href="#">Give us feedback</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Another link</a> |</li> 
    <li> 
    <a href="#">Pick your location</a> | 
    <ul class="subnav"> 
     <li><a href="#">Los Angeles</a></li> 
     <li><a href="#">New York</a></li> 
    </ul> 
    </li> 
</ul> 

Alors votre code jQuery ressemblerait à ceci:

$(function(){ 
    var $nav = $("#nav-bar"), 
     $subnav = $nav.find("ul.subnav").hide(); 

    $nav.children('li:has(ul.subnav)').click(function(e){ 
    e.preventDefault(); 
    var $sub = $(this).children('ul.subnav').toggle(); 
    $subnav.not($sub).hide(); 
    }) 
}) 

Answer 2

Eh bien, il y a quelques façons que vous pouvez faire C'est un peu plus facile de maintenir votre code. Voici un exemple rapide:

//hide the subnavs and give them a little down arrow 
$('ul.subnav').hide().parent().append('<small>&#9660;</small>'); 

// show its subnav when clicked 
$('#nav-bar ul li').click(function() { 
    var subnav = $(this).children('ul.subnav'); 
    // hide the other's subnav if it's visible 

$('ul.subnav').hide(); 
subnav.toggle(); 
}); 

Fondamentalement, cela Remasquez à nouveau tous les éléments les « subnav », puis montrer celui qui a été cliqué. Mais la principale différence ici est que vous pouvez maintenant ajouter un troisième, quatrième, menu déroulant, etc., ou changer les ID sans avoir à changer le javascript.

Le code HTML que vous utilisez est plutôt bon et relativement similaire aux menus de navigation «standard».

Edit: Ce qui est apparemment similaire à la réponse précédente: P

Answer 3

je me débarrasser du code en ligne javascript:void(0) il est unecessary. Avoir votre lien lien vers "#".

Vous ne voulez certainement pas faire correspondre les ID comme ça, ça ne fonctionne pas très bien. Au lieu de cela, quelque chose comme cela devrait fonctionner (non testé):

$('#nav-bar ul li').click(function() {  
    $(this) 
    //hide all subnavs 
    .closest("#nav-bar").find("ul.subnav").hide().end().end() 
    //show subnav under the li clicked 
    .find("ul.subnav").show();  
}); 

Chaque fois que possible, vous voulez le code chain your jquery afin que vous n'avez pas à saisir un nouvel élément à chaque fois, du Royaume. D'après ce que je comprends, il est plus efficace de chaîner car il traverse l'élément déjà trouvé, plutôt que d'aller chercher un nouveau. Le .end() rétablit votre chaîne à l'élément trouvé précédent, donc quand je dis .closest ("blah"). Find ("blah2") je vais deux niveaux de profondeur. .end(). end() me ramènera à l'élément d'origine (this) afin que je puisse trouver le subnav spécifique en dessous.