jquery顯示和隱藏mouseout（）問題

Question

我已經設置了一個jQuery的懸停顯示和隱藏功能click here for site但是它不工作，我想要的方式。當鼠標懸停在「存儲」鏈接上時，一旦鼠標光標從鏈接「存儲」隱藏的div幻燈片，它就會顯示隱藏的div，這是一個子菜單。

我希望子菜單保持激活狀態，除非子菜單中的某個鏈接已被點擊或者鼠標光標已移出子菜單區域。

下面

是我的代碼片段...

$(document).ready(function(){ 
     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

     $('.show_hide').hover(function(){ 
     $(".slidingDiv").slideToggle(); 
     }); 

     $('.slidingDiv').mouseout(function(){ 
     $(".slidingDiv").slideUp(); 
    }); 
     }); 

<div id="menu_store" class="slidingDiv transparent"> 
<div class="menu"> 
<h3>clothing</h3> 
<ul class="navigation"> 
    <li><a href="#">sweats/knitwear</a></li> 
    <li><a href="#">shirts</a></li> 
    <li><a href="#">denim</a></li> 
    <li><a href="#">outwear</a></li> 
    <li><a href="#">footwear</a></li> 
</ul> 
</div> 
<div class="menu"> 
    <h3>lifestyle</h3> 
<ul class="navigation"> 
    <li><a href="#">books</a></li> 
    <li><a href="#">art</a></li> 
    <li><a href="#">objects</a></li> 
</ul> 

<div id="menu"> 
<ul class="cl"> 
    <li><a class="show_hide" href="#">store</a></li> 
    <li><a href="#">daily</a></li> 
    <li><a href="#">featured</a></li> 
    <li><a href="#">contact</a></li> 

</ul> 

有沒有人有一個解決方案...？

Answer 1

我想通了。 http://jsfiddle.net/vtFfv/ 相關文章：http://api.jquery.com/mouseleave/

$(document).ready(function() { 
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').mouseenter(function() { 
     $(".slidingDiv").slideDown(); 
     $(".slidingDiv").mouseleave(function() { 
      $(".slidingDiv").slideUp(); 
     }); 
     $('.slidingDiv a').each(function() { 
      $(this).click(function() { 
       $(".slidingDiv").slideUp(); 

      }); 
     }); 
    }); 
}); 

當您隱藏slidingDiv，鼠標事件沒有註冊。因此，解決方案是在您決定展示它時（即在mouseenter上）將mouseleave事件附加到它。然後註冊點擊鏈接很容易。