jQuery uczynić div dziecka widoczne na unosić się (tylko na efektywny element li, nie nadrzędny!)

Question

Próbowałem już wszystkie istniejące posty związane z tym, ale nie działają tak, jak chcę ...

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> 

powinno to wyglądać tak:

• start Page
  • Sub Page
    • Sub Page

Chcę, div.li_options który jest ustawiony dla każdego elementu li być wyświetlane tylko na uciążliwy element. Wiem, że li rodzica również "unosi się" na unoszących się elementach potomnych, ale nie mam tych "li_options" do wyświetlenia.

Najlepszym rozwiązaniem tej pory:

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

Ale z tym, rodzice nie są wykluczone ... Nie wiem, jak zwrócić na nich, ponieważ nie może być poziom nieograniczone. Czy wiesz, jak to działa?

Answer 1

demo Pracahttp://jsfiddle.net/sm8vS/

wersja Updatedhttp://jsfiddle.net/36cV3/

albo jak to =>http://jsfiddle.net/N6xqm/ (mniejszy sposób)

Extra Ponadto można spojrzeć kilka wtyczek o nazwie menu widoku drzewa. - jeśli zajdzie taka potrzeba lub jeśli szukasz czegoś takiego: http://jquery.bassistance.de/treeview/demo/

zachowanie Najedź Start Page =>Sub Seite pojawi Teraz najedź Sub Seite => =>Sub Sub Seite pojawi.

Dla lepszego parsowania dodałem - sub-menu i sub-sub-menu klasy w odpowiedniej strukturze menu. kod odpoczynku jest jak poniżej.

Nadzieję, że pasuje do Twoich potrzeb :)

Innym bardzo niewielki sposób zrobićhttp://jsfiddle.net/N6xqm/:)

(function($) { 

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

})(jQuery);​ 

Przykładowy 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

najkrótsza droga byłaby

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