Jquery menu déroulant sur le vol stationnaire ou sur un clic

J'ai un menu qui ressemble à celui ci-dessous. Je veux que le premier niveau de l'enfant à apparaître sur le vol stationnaire OU sur un clic (de sorte qu'il fonctionne sur l'iPad comme bien). Lorsque vous passez la souris (ou en cliquant sur) fir-enfant au niveau que je veux c'est le deuxième niveau de l'enfant si elles existent. Sur le vol stationnaire ou lors d'un clic sur un autre DOM-tout élément du sous-menu doit être cachée à nouveau.

Aussi quand un utilisateur est sur la page, je veux menu pour être replié jusqu'à ce qu'il plane au-dessus ou clique sur un autre élément de menu, il peut toujours voir où il en est dans la navigation.

Je suis la construction de ce sous WordPress pour un ami qui devrait être en mesure de créer et de modifier son menu de navigation à l'aide de l'arrière-plan. Par conséquent, l'ajout de certaines classes ou ID de certains éléments n'est pas une option.

<style>
.sub-menu {display: none;}
</style>


<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>

C'est ce que je suis venu avec, mais il ne fonctionne pas. Lors du survol de l'enfant 1.1 les deux 1.1 et 1.2 les frères et sœurs sont affichés.

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() {  
    $(this).find("ul.sub-menu").hide(); 
});

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
});
juste un commentaire, l'ipad va faire le hover action en un clic, si votre première option dans le menu ne marche pas rediriger n'importe où il permet d'afficher votre menu, donc, si votre menu est d'aller travailler de cette façon, ne pas la peine de faire les deux actions (pointer et cliquer)

OriginalL'auteur WhoMe | 2012-07-04

  1. 3

    Essayez les solutions suivantes en ciblant Directement les ul

    Solution Un:

    // previous (following) is very inefficient and slow:
//  -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
// Rather, target the exact ULs which are Direct Children

$("ul.menu").find('li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').slideUp();
        // If something Slides Down, it should slide up as well,
        // instead of plain hide(), your choice - :)
    }
);

    Solution B:

    pour plus de Précision sur les deux ULs

    Mise à jour: la Solution A fonctionne très bien et fait B redondant 

    $("ul.menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

$("ul.sub-menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

    Vérifier la Violon

    La JS Fiddle pour la solution ci-dessus - jsfiddle.net/OMS_/XDkXq
    Fonctionne parfaitement avec très peu de code. Merci

    OriginalL'auteur Om Shankar

  2. 0

    Ce n'est pas testé .. et vous devez le développer un peu.

    $('ul.menu li').siblings('ul:first-child').on('click', function() {
if($(this).is(':visible')) {
    $(this).hide();
}
else {
    $(this).show(); 
}
})

$('ul.menu li').siblings('ul:first-child').hover(
function() {
    $(this).show();
},
function() {
    $(this).hide();
}
)

    Edit: Comme je vois que votre structure est incohérent. Parfois, vous placez une liste DANS un élément li, parfois, il est placé comme un frère ou une sœur...

    Utiliser $(this).toggle() sur le clic au lieu d'afficher/masquer et une condition.
    J'ai édité la structure, de sorte qu'il est conforme. Merci.

    OriginalL'auteur Daniel