JQuery'de alt menümdeki bağlantılar için oklar nasıl eklenmez?

Question

Kendi jQuery gezinme altmenüm komut dosyasını yazıyorum. ul etiketine sahip olan nav numaralı yatay bağlantıdaki bir bağlantının üzerine geldiğinizde, ul görünür. Bir alt menüsü varsa yatay nav bağlantılara bir ok ekler biraz kod var. Benim problemim, okları alt menüdeki bağlantılara da eklemesidir. Bu işlevsel olarak büyük bir anlaşma değil, ama kötü görünüyor.

Tek bölüm, $(this).find('> a') kullanırsam alt menünün görünümünü sıkıştırır. Alt menü, üst düzey bağlantının üzerine geldiğimde görünür, ancak fare bu bağlantıyı terk ettiğinde hemen kaybolur. Bu yüzden, farenin üst seviye bağlantısının üzerine geldiği zaman tüm alt menüyü görebilirim. Fare üst düzey bağlantıyı terk ettiğinde, alt menü kaybolur ve alt menü bağlantılarına tıklayamıyorum. Neyi yanlış yapıyorum? Bu bir JSFiddle. $(this).find('a')'u $(this).find('> a') olarak değiştirin ve ne demek istediğimi göreceksiniz. Zaman ayırdığın için teşekkürler!

$(document).ready(function(){ 
    $('nav ul li:has(ul)').each(function(){ 
     var listItem = $(this); 
     $(this).find('> a').each(function(){ 
      var aTag = $(this); 
      aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
      aTag.on('mouseover', function(){ 
       listItem.find('ul').each(function(){ 
        $(this).css('display', 'block'); 
       }); 
      }) 
      .on('mouseout', function(){ 
       listItem.find('ul').each(function(){ 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
}); 

Answer 1

Eğer .each

$(document).ready(function() { 
    $('nav ul li:has(ul)').each(function() { 
     var listItem = $(this); 
      // first a tag as new var 
      var aTagFirst = listItem.children('a'); 
      aTagFirst.append('<img src="{img_url}/caret.png" width="8" height="8">'); 

     $(this).find('a').each(function() { 
      var aTag = $(this); 
      aTag.on('mouseover', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'block'); 
       }); 
      }) 
       .on('mouseout', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
}); 

DEMO

aracılığıyla Döngünüzden ilk a etiketi çekin zorunda

Answer 2

ben CSS ile yapabilirsiniz tahmin, ben kaldırdık olaylar mouseover, mouseout ve ekledi bu stilleri:

li:hover ul { 
    display: block; 
} 

li:hover a { 
    background: #66cc00; 
} 

li:hover li a { 
    background: #333; 
} 

DEMO

Answer 3

$(document).ready(function() { 
    $('nav ul li:has(ul)').each(function() { 
     var listItem = $(this); 
     $(this).find('> a,>ul').each(function() { 
      var aTag = $(this); 
      aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
      aTag.on('mouseover', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'block'); 
       }); 
      }) 
      .on('mouseout', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
}); 

Burada sadece güncelleme:

$(this).find('> a,>ul') 

Css:

tek güncelleme biridir: padding

nav > ul > li > a { 
    display: block; 
    margin: 0px; 
    border-bottom: 0; 
    color: #333; 
    height: 52px; 
    padding: 0px 25px 0px 25px; 
    font-size: 1.25em; 
    line-height:55px; 
} 

Update ve çizgi yüksekliği ekleyin.

Demo

: Kodun olur, böylece li elemanı değil, a eleman için vurgulu geri aramalar eklemem gerekiyor http://jsfiddle.net/fsrf5jw3/5/

Answer 4

: bu daha uygun performans Ayrıca

var listItem = $(this); 
listItem.find('> a').each(function(){ 
    var aTag = $(this); 
    aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
}); 

listItem 
    .on('mouseover', function(){ 
     listItem.find('ul').each(function(){ 
      $(this).css('display', 'block'); 
     }); 
    }) 
    .on('mouseout', function(){ 
     listItem.find('ul').each(function(){ 
      $(this).css('display', 'none'); 
     }); 
    }); 

, marsh cevap gider gibidir -Chss ile böyle şeyler yapmak için javascript değil.