jQuery vurguluda çocuk bölmesini görünür yap (yalnızca etkin li öğesinde değil, üst öğe için!)

Question

Zaten bununla ilgili varolan yazıların tümünü denedim, ancak istediğim gibi çalışmıyorlar ...

HTML:

<ol class="sortable"> 
<li> 
    <div> 
     <a href="#">Start Page</a> 
     <div class="li_options"> 
      <a href="#"><img src="img/icons/small_add.png" /></a> 
      <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <ol> 
     <li> 
      <div> 
       <a href="#">Sub Seite</a> 
       <div class="li_options"> 
        <a href="#"><img src="img/icons/small_add.png" /></a> 
        <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <ol> 
       <li> 
        <div> 
         <a href="#">Sub Sub Seite</a> 
         <div class="li_options"> 
          <a href="#"><img src="img/icons/small_add.png" /></a> 
          <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
         </div> 
         <div class="clear"></div> 
        </div> 
       </li> 
      </ol> 
     </li> 
    </ol> 
</li> 
<div class="clear"></div> 

Bu gibi görünmelidir:

• Başlangıç ​​Sayfası
  • Alt Sayfa
    • Alt Sayfa

Her li elemanı için ayarlanmış div.li_options yalnızca elemanı gezinip üzerinde gösterilmesini istiyoruz. Biliyorum, ebeveyni li, aynı zamanda, çocuk unsurları üzerinde gezdirmek için "gezdirilir", ama ben görüntülenecek "li_options" yok.

şimdiye kadar en iyi çözüm:

$(document).ready(function() {  
    $('.sortable li').mouseover(function() { 
     $(this).children().children('.li_options').show(); 
    }).mouseout(function() { 
     $(this).children().children('.li_options').hide(); 
    }); 
}); 

Fakat bununla

, veliler hariç edilmiyor ... Ben sonsuz seviyeleri olabilir, çünkü onlara işaret etmek nasıl bilmiyorum. Bunun nasıl çalıştığını biliyor musun?

Answer 1

Çalışma demohttp://jsfiddle.net/sm8vS/

Güncelleme sürümü http://jsfiddle.net/36cV3/

VEYA böyle =>http://jsfiddle.net/N6xqm/ (Daha küçük yön) Ayrıca

Ekstra adıyla birkaç eklentileri bakabilirsiniz ağaç görünümü menüsü. - Eğer böyle bir şey arıyorsanız olabilir ya gerekirse: http://jquery.bassistance.de/treeview/demo/

Davranışı hover Start Page =>Sub Seite üzerinde görünecek, Şimdi> =>Sub Sub Seite görünecektir = Sub Seite üzerinde gezdirin.

Daha iyi ayrıştırma için ilgili menü yapınıza - sub-menu ve sub-sub-menu sınıflarını ekledim. dinlenme kodu aşağıdaki gibidir.

:)

başka çok küçük bir yol yapmak ihtiyaçlarınıza uyan Umuthttp://jsfiddle.net/N6xqm/:)

(function($) { 

    $('.li_options').hide(); 
     $('a').mouseover(function() { 
      $(this).next('.li_options').show(); 
     }).mouseout(function() { 
      $('.li_options').hide(); 
     }); 

})(jQuery);​ 

Örnek kod

(function($) { 

    $('.li_options').hide(); 
    $('.sortable li').mouseover(function() { 
     $(this).find('ol').show(); 
     anchor_hover(); 
    }).mouseout(function() { 
     anchor_hover(); 
     $(this).find('ol').hide(); 
    }); 

    function anchor_hover() { 
     $('a').mouseover(function() { 
      $(this).next('.li_options').show(); 
     }).mouseout(function() { 
      $('.li_options').hide(); 
     }); 

    } 


})(jQuery);​ 

HTML

<ol class="sortable"> 
<li> 
    <div> 
     <a href="#">Start Page</a> 
     <div class="li_options"> 
      <a href="#"><img src="img/icons/small_add.png" /></a> 
      <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <ol class="sub-menu"> 
     <li> 
      <div> 
       <a href="#">Sub Seite</a> 
       <div class="li_options"> 
        <a href="#"><img src="img/icons/small_add.png" /></a> 
        <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
       </div> 
       <div class="clear"></div> 
      </div> 
      <ol class="sub-sub-menu"> 
       <li> 
        <div> 
         <a href="#">Sub Sub Seite</a> 
         <div class="li_options"> 
          <a href="#"><img src="img/icons/small_add.png" /></a> 
          <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a> 
         </div> 
         <div class="clear"></div> 
        </div> 
       </li> 
      </ol> 
     </li> 
    </ol> 
</li> 
<div class="clear"></div>​ 

Answer 2

en kısa yolu cevap için

$('.sortable li').mouseover(function(e) { 
    $('> div > .li_options', $(this)).show(); 
    e.stopPropagation(); 
}).mouseout(function(e) { 
    $('> div > .li_options', $(this)).hide(); 
    e.stopPropagation(); 
});