jquery: keine spezifischen Dropdown-Menüs anzeigen

Question

Einige meiner Hauptmenüpunkte haben Dropdown-Menüs, einige nicht. Ich möchte festlegen, welche beim Hover und beim Klick angezeigt werden und welche nicht. Im folgenden Beispiel möchte ich das erste und vierte Drop-down-Fenster, , verbieten, da sie nur ein Element haben.

<div id="main-menu"> 
    <ul> 
    <li><a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a> 
     <ul class="dropdown-menu"> 
     <li><a rel="bookmark" href="http://piirissaareturism.ee/avasta-piirissaar/welcome-to-your-site">Welcome to Your Site!</a></li> 
     </ul> 
    </li> 
    <li><a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a> 
     <ul class="dropdown-menu"> 
     <li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/toitlustus">Toitlustus</a></li> 
     <li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/majutus">Majutus</a></li> 
     </ul> 
    </li> 
    <li><a href="http://piirissaareturism.ee/puhkajale/">Puhkajale</a></li> 
    <li><a href="http://piirissaareturism.ee/meist/">Meist</a> 
     <ul class="dropdown-menu"> 
     <li><a rel="bookmark" href="http://piirissaareturism.ee/meist/mtu-piirissaare-turism">MTÜ Piirissaare Turism</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Ich benutze Jquery auch folgendes zu tun:

zuerst: nach unten rutschen Dropdown auf schweben

$('#main-menu ul li').hover(
    function() { 
    $('ul', this).stop(true, true).delay(100).slideDown(300); 
    }, 
    function() { 
    $('ul', this).stop(true, true).slideUp(300);    
    }); 

Sekunde: wenn Menüpunkt Dropdown hat - zeigen sie auf Klick und nicht Gehe zur URL des Eintrags, andernfalls gehe zur URL dieses Eintrags.

$('#main-menu ul li:has(.dropdown-menu)').on('click', function (event) { 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).find('ul').slideToggle(); 
}); 

ich weiß, ist meine Beschreibung abstrusen, aber Blick auf my jsfiddle besser zu verstehen.

Answer 1

Sie können :nth-child() auf Elemente herauszufiltern, nicht erforderlich ist,

Fiddle

$('#main-menu ul li:not(:nth-child(1),:nth-child(4))').hover(
    ... 

---

Für :first,:last zu arbeiten, ich hatte den Wähler zu ändern, dass nur direkte Abkömmlinge zu erhalten .

$('#main-menu > ul > li:not(:first,:last)').hover(

Fiddle

---

$('#main-menu > ul > li:not(:first,:last)').hover(
    function() { 
    $('ul', this).stop(true, true).delay(100).slideDown(300); 
    }, 
    function() { 
    $('ul', this).stop(true, true).slideUp(300); 
    }); 

$('#main-menu > ul > li:not(:first,:last):has(.dropdown-menu)').on('click', function(event) { 
    if ($(event.target).parents('ul.dropdown-menu').length > 0) { 
    event.stopPropagation(); 
    } else { 
    event.preventDefault(); 
    } 
    $(this).find('ul').slideToggle(); 
}); 

Answer 2

Siehe https://stackoverflow.com/a/12198561/3671484 für eine große Antwort auf diese. Es ermöglicht Ihnen, innerhalb eines Elternteil für eine bestimmte Anzahl von Kindern zu überprüfen

Zum Beispiel es in einem Elternteil für Kinder Elemente zu überprüfen:

/* two items */ 
    li:first-child:nth-last-child(2), 
    li:first-child:nth-last-child(2) ~ li { 
    width: 50%; 
} 

Diese prüft, ob das erste Kind (li:first-child) ist zwei Geschwister Elemente vor dem letzten Kind (:nth-last-child(2)) und wird auch die Breite dieses Elements auf 50% zusammen mit allen seinen Geschwister setzen