Impossible d'afficher un seul tiroir par jQuery au démarrage

Question

Je souhaite qu'un seul tiroir soit ouvert au démarrage. Pour le moment, tous les tiroirs sont ouverts.

Le jQuery code

$(document).ready(function() { 
    // hide all ULs inside LI.drawer except the first one 
    $('LI.drawer UL:not(:first)').hide(); 

    // apply the open class 
    $('li.drawer:first ul').addClass('open'); 

    $('h2.drawer-handle').click(function() { 
     // hide the currently visible drawer contents 
     $('li.drawer ul:visible').hide(); 

     // remove the open class from the currently open drawer 
     $('h2.open').removeClass('open'); 

     // show the associated drawer content to 'this' (this is the current H2 element) 
     // since the drawer content is the next element after the clicked H2, we find 
     // it and show it using this: 
     $(this).next().show(); 

     // set a class indicating on the H2 that the drawer is open 
     $(this).addClass('open'); 
    }); 
}); 

Le code HTML dans le corps

<ul class="drawers"> 

    <li class="drawer"> 
     <h2 class="drawer-handle open">Contact</h2> 
     <ul> 
      <li>A</li> 
      <li>B</li> 
     </ul> 
    </li> 

    <li class="drawer"> 
     <h2 class="drawer-handle">papers</h2> 
     <ul> 
      <li>A</li> 
      <li>B</li> 
     </ul> 
    </li> 

</ul> 

Comment pouvez-vous montrer un tiroir et se cacher le reste au démarrage?

Answer 1

Vous avez la bonne idée, juste le mauvais emplacement de votre: première clause.

$('li.drawer:first ul').addClass('open'); 

Answer 2

Le code original fonctionne également.

J'ai eu le bug suivant dans mon code sur le serveur

$(document).ready(function() { 
// hide all ULs inside LI.drawer except the first one $('LI.drawer UL:not(:first)').hide(); 

... 

La première ligne de mon code était sous la marque de commentaire.