jQuery的下拉鼠標懸停時

Question

如何留在孩子鼠標懸停在PARENT1，如果將鼠標懸停在其他PARENT2其子打開了與孩子的PARENT1就隱藏在這PARENT2鼠標懸停/鼠標移開開..

var drop = $('#nav li > ul'); 
var par = $('#nav li') 
drop.hide(); 
$('#nav li').mouseover(function(){ 
    drop.show(); 
}); 
drop.mouseout(function(){ 
     drop.show() 
});

<ul id="nav"> 
<li>PARENT 1 
    <ul> 
    <li>CHILD </li> 
    <li>CHILD </li> 
    <li>CHILD </li> 
    </ul> 
</li> 
<li>PARENT 2 
        <ul> 
    <li>CHILD </li> 
    <li>CHILD </li> 
    <li>CHILD </li> 
    </ul> 
       </li> 
<li>PARENT 3</li> 
<li>PARENT 4</li> 
</ul> 

Answer 1

您可以使用摺疊式菜單的jQuery的that.i'll儘快給您的代碼。

// Jquery: 

    $(document).ready(function() 
    { 
     //slides the element with class "menu_body" when mouse is over the paragraph 
     $("#secondpane p.menu_head").mouseover(function() 
     { 
      $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); 
      $(this).siblings().css({backgroundImage:"url(left.png)"}); 
     }); 
    }); 


// CSS : 
    <style type="text/css"> 
    body { 
     margin: 10px auto; 
     font: 75%/120% Verdana,Arial, Helvetica, sans-serif; 
    } 
    .menu_list {  
     width: 150px; 
    } 
    .menu_head { 
     padding: 5px 10px; 
     cursor: pointer; 
     position: relative; 
     margin:1px; 
     font-weight:bold; 
     background: #eef4d3 url(left.png) center right no-repeat; 
    } 
    .menu_body { 
     display:none; 
    } 
    .menu_body a{ 
     display:block; 
     color:#006699; 
     background-color:#EFEFEF; 
     padding-left:10px; 
     font-weight:bold; 
     text-decoration:none; 
    } 
    .menu_body a:hover{ 
     color: #000000; 
     text-decoration:underline; 
     } 
    </style> 

// HTML CODE: 
    <div style="float:left; margin-left:20px;"> <!--This is the second division of right--> 
     <p><strong>Works with mouse over </strong></p> 
     <div class="menu_list" id="secondpane"> <!--Code for menu starts here--> 
      <p class="menu_head">Header-1</p> 
      <div class="menu_body"> 
      <a href="#">Link-1</a> 
      <a href="#">Link-2</a> 
      <a href="#">Link-3</a> 
      </div> 
      <p class="menu_head">Header-2</p> 
      <div class="menu_body"> 
       <a href="#">Link-1</a> 
      <a href="#">Link-2</a> 
      <a href="#">Link-3</a> 
      </div> 
      <p class="menu_head">Header-3</p> 
      <div class="menu_body"> 
       <a href="#">Link-1</a> 
      <a href="#">Link-2</a> 
      <a href="#">Link-3</a>   
      </div> 
     </div>  <!--Code for menu ends here--> 
    </div> 

你可以試試這段代碼，我相信它對你有幫助。 你也可以參考my blog那個.goto Source files框在側邊欄，並下載源代碼zip文件。

謝謝。

Answer 2

使用jQuery手風琴，http://docs.jquery.com/UI/Accordion

Answer 3

首先分配一個公用類所有父李和孩子UL這樣的事情...

<ul id="nav"> 
      <li class="parent">PARENT 1 
       <ul class="child"> 
       <li>CHILD </li> 
       <li>CHILD </li> 
       <li>CHILD </li> 
       </ul> 
      </li> 
      <li class="parent">PARENT 2 
      <ul class="child"> 
       <li>CHILD </li> 
       <li>CHILD </li> 
       <li>CHILD </li> 
       </ul> 
      </li> 
      <li class="parent">PARENT 3</li> 
      <li class="parent">PARENT 4</li> 
</ul> 

那就試試這個..

$('.parent').mouseover(function(){ 
      $('.child').hide()//will first hide all the child 
      $(this).find('.child').show();//show the current child 
     });