jquery accordion mouseover和mouseout在垂直菜單導航

Question

下面是我的代碼，我想當我鼠標懸停鏈接CMT它的div將打開，當我鼠標出它的div關閉。 .....

<div class="wrap"> 

     <ul class="accordion1"> 
      <li> 
       <h2 id="first">CMT</h2> 
       <div class="content"> 
        contents of 1st 
       </div> 
      </li> 
      <li> 
       <h2>FOIS</h2> 
       <div class="content"> 
        contents of 2nd 
       </div> 
      </li> 
      <li> 
       <h2>ASP</h2> 
       <div class="content"> 
        contents of 3rd 
       </div> 
      </li> 
      <li> 
       <h2>PTT</h2> 
       <div class="content"> 
        contents of 4th 
       </div> 
      </li> 
     </ul> 
    </div> 

Answer 1

櫃面試試這個

$('h2').on('mouseenter', function() { 
    $(this).next().show(); 
}).on('mouseleave', function() { 
    $(this).next().hide(); 
}); 

DEMO

你想要的要顯示的內容，當你將鼠標懸停在太，你可以做到這一點

$('li').on('mouseenter', function() { 
    $(this).find('.content').show(); 
}).on('mouseleave', function() { 
    $(this).find('.content').hide(); 
}); 

DEMO

Answer 2

我有一個類似的解決方案，但使用懸停（）代替：

$(document).ready(function(){ 
    $('h2').hover(function(){ 
     $(this).next().css("display","block"); 
    },function(){ 
     $(this).next().css("display","none"); 
    }); 
}); 

jsFiddle Demo

其實，我喜歡.show（）/ .hide（）方法，用這更好：

$(document).ready(function(){ 
    $('h2').hover(function(){ 
     $(this).next().show('fast'); 
    },function(){ 
     $(this).next().hide('fast'); 
    }); 
}); 

jsFiddle Demo 2

不要過分這個或任何東西，但是從另一個stackoverflo跨越一個非常有趣的解決方案來了W¯¯的問題在這裏：

HOVERINTENT Plugin Solution

最新更新雖然，我答應！