jQuery làm cho div con hiển thị trên di chuột (chỉ trên phần tử li hiệu quả, không phải là cha mẹ!)

Question

Tôi đã thử tất cả các bài đăng hiện có liên quan đến điều này, nhưng chúng không hoạt động như tôi muốn ...

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> 

này sẽ trông như thế này:

• Start Page
  • Sub Trang
    • Sub Trang

Tôi muốn div.li_options được đặt ra cho mọi phần tử li để được hiển thị trên lơ lửng phần tử. Tôi biết, li của cha mẹ cũng đang bị "lơ lửng" trên các phần tử con lơ lửng, nhưng tôi không hiển thị những "li_options" đó.

Giải pháp tốt nhất cho đến nay:

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

Nhưng với điều này, cha mẹ không được loại trừ ... Tôi không biết làm thế nào để chỉ vào chúng, bởi vì có thể có mức độ vô tận. Bạn có biết cách làm việc này không?

Answer 1

bản demo Làm việchttp://jsfiddle.net/sm8vS/

phiên bản cập nhậthttp://jsfiddle.net/36cV3/

HOẶC như thế này =>http://jsfiddle.net/N6xqm/ (cách nhỏ hơn)

tắm Ngoài ra bạn có thể tìm vài plugins bởi tên của menu chế độ xem dạng cây. - nếu cần thiết hoặc nếu bạn đang tìm kiếm một cái gì đó như thế này: http://jquery.bassistance.de/treeview/demo/

Behavior di chuột qua Start Page =>Sub Seite sẽ xuất hiện, Bây giờ di chuột qua Sub Seite => =>Sub Sub Seite sẽ xuất hiện.

Để phân tích cú pháp tốt hơn, tôi đã thêm - sub-menu và sub-sub-menu lớp trong cấu trúc menu tương ứng của bạn. mã còn lại là như dưới đây.

Hy vọng nó phù hợp với nhu cầu của bạn :)

Một nhiều cách nhỏ để làmhttp://jsfiddle.net/N6xqm/:)

(function($) { 

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

})(jQuery);​ 

Mẫu mã

(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

con đường ngắn nhất sẽ là

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