Ako pripojiť toto rozpätie, ak je prvok LI rodičom A má UL (deti alebo podmenu) - jquery

V podstate chcem pridať šípku, ak myš presúva moju navigáciu. Mali by sa však uplatňovať dve pravidlá:

1. Musí to byť TOP rodič (to už vyriešim v kóde)
2. Musí mať podponuku DETSKÉ prvky (UL) atď. (Čo je problém!)

Nemôžem, bez ohľadu na to, čo mám robiť, aby sa ukázala až po podmienečnom overení, či má najprv deti. Teraz obidva odkazy, ktoré obsahujú deti, a ktoré neukazujú šípku .. Prosím, pomôžte mi.

Môj kód:

$("#menu ul").css({display: "none"}); // Opera Fix
$("#menu li").hover(function(){
if (($(this).parent().attr("id") == "menu")) {
$(this).append("<span class="arrow"></span>");
}
$(this).find("ul:first").css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
if ($(this).parent().attr("id") == "menu") {
$(".arrow").remove();
}
$(this).find("ul:first").css({visibility: "hidden"});
});

Problém: ako pridať && podmienené, ak do ponuky this.parent (). Attr ("id") == "skontroluje, či má LI deti / sub UL

Skúsil som $ (this) .next (). Nemá ("ul") šťastie! Stále pridáva všetky položky s deťmi a bez nich.

Potrebujete, prosím, svoj príspevok.

odpovede:

2 pre odpoveď č. 1

Naozaj by ste to nepotrebovali if() vyhlásenia. Len si v selektore vyžiadajte, aby li je dieťaťom #menu.

Predpokladám, že #menu prvok je vrchol <ul> a tvoj .hide() bolo skryť podúrovňu <ul> prvky.

Bez toho, aby som videl váš HTML, nie som si istý, či to je presne to, čo potrebujete, ale vyskúšajte to:

$("#menu > li:has(ul)").hover(function(){
$(this).append("<span class="arrow"></span>")
.find("ul:first").css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
$(this).children(".arrow").remove()
.end().find("ul:first").css({visibility: "hidden"});
});

Takže to bude strieľať vznášadlo iba ak <li> je a priame dieťa z #menua ak áno :has() potomok <ul>.

---

1 pre odpoveď č. 2

Ak sa chystáte skontrolovať, či rodič li prvok je #menu v obsluhe udalosti hover, potom môžete tiež vybrať iba priameho potomka #menu s priamym potomkom >.

Za predpokladu, že ul Prvok podponuky je dieťaťom #menu > li prvky (od ul prvky v inom ul prvok je neplatný HTML), tento kód by mal fungovať:

$("#menu > li").hover(function(){
var $this = $(this);

if ($this.children("ul").length) {
$this.append("<span class="arrow"></span>");
}

$this.find("ul:first").hide().slideToggle(500);
},function(){
$(".arrow").remove();
$(this).find("ul:first").hide();
});

Tento kód používa aj hide() fungujú namiesto trocha chaotickejších css("display", "none"

---

0 pre odpoveď č. 3

Najprv, keď zviažete udalosť hover na #menu > li namiesto toho by ste nemuseli skontrolovať, či sa nejedná o priame dieťa (t. j. položka najvyššej úrovne). Potom pokračujte a jednoducho vyhľadajte druhú podmienku:

$("#menu > li").hover(function() {
if ( !$(this).find("ul").length ) return;

$(this).append("<span class="arrow"></span>");
....
}, function() {
// Just try to remove it, jQuery won"t operate on empty sets anyways
$("span.arrow", this).remove();
...
});

Nech sa páči.

---

0 pre odpoveď č. 4

if($(this).parent("#id")) { ... } by mal fungovať, pretože rodič () sa zameriava iba na bezprostredných rodičov.

if($(this).parent("#id").children("ul")) { ... } bude fungovať, keď sa nájde ID rodiča A má bezprostredné dieťa <ul />

Ďalším spôsobom, ako to urobiť, je:

function doToggle(element){
element.children("ul").css({visibility:"visible", display:"none"}).slideToggle(500);
}
function doHide(element){
element.children("ul").css({visibility:"hidden"});
}
$("#menu li").hover(function(){
doToggle($(this));
},
function(){
doHide($(this));
});
$("#menu > li").hover(function(){
$(this).append("<span class="arrow"></span>");
},
function(){
$(".arrow").remove();
});

Týmto spôsobom nemusíte prechádzať DOMom.

---