點擊ancor標籤後，jQuery mouseover將不起作用

Question

我寫了一些jQuery，當鼠標進入區域時，jQuery刪除一個顯示：hide;屬性。

它在第一次加載頁面時起作用，但是，當其中一個錨標籤被點擊時，它在未隱藏的元素中，鼠標打開菜單，但一旦鼠標移到上面時不會保持打開狀態菜單。

我該如何解決這個問題？

$(document).ready(function() { 
 
    $('#kDropdown, .hidden-dropdown .row .columns').bind('mouseenter', function(e) { 
 
    $(".hidden-dropdown").removeClass("hide"); 
 
    }); 
 
    $('#kDropdown, .hidden-dropdown .row .columns').bind('mouseleave', function(e) { 
 
    $('.hidden-dropdown').addClass("hide"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hidden-dropdown hide"> 
 
    <div class="row"> 
 
    <div class="small-6 large-6 columns"> 
 
     <ul style="position: relative; float: left;"> 
 
     <li><a href="#">Motion Sensor</a></li> 
 
     <li><a href="#">Water Detector</a></li> 
 
     <li><a href="#">Smart Plug</a></li> 
 
     <li><a href="#">Door Sensor</a></li> 
 
     <li><a href="#">Door Sensor Pro</a></li> 
 
     </ul> 
 
     <ul style="position: relative; float: right;"> 
 
     <li><a href="#">Z-Wave Extender</a></li> 
 
     <li><a href="#">Siren</a></li> 
 
     <li><a href="#">Mouser</a></li> 
 
     <li><a href="#">Water Valve</a></li> 
 
     </ul> 
 
    </div> 
 

 

 
    <!-- Trigger to open--> 
 
    <div class="hidden-dropdown hide"> 
 
     <div class="row"> 
 
     <div class="small-6 large-6 columns"> 
 
      <ul style="position: relative; float: left;"> 
 
      <li><a href="#">Motion Sensor</a></li> 
 
      <li><a href="#">Water Detector</a></li> 
 
      <li><a href="#">Smart Plug</a></li> 
 
      <li><a href="#">Door Sensor</a></li> 
 
      <li><a href="#">Door Sensor Pro</a></li> 
 
      </ul> 
 
      <ul style="position: relative; float: right;"> 
 
      <li><a href="#">Z-Wave Extender</a></li> 
 
      <li><a href="#">Siren</a></li> 
 
      <li><a href="#">Mouser</a></li> 
 
      <li><a href="#">Water Valve</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

請在下拉菜單中的導航鏈接的孩子。

假設你想要的導航/下拉菜單要像this site，我總是用類似如下結構（XML）的東西：

<navigation> 
    <link position="relative" height="30px"> 
    <text>About Us</text> 
    <dropdown position="absolute" top="30px"> 
     <dropdowncontent></dropdowncontent> 
    </dropdown> 
    </link> 
    ... more links ... 
</navigation> 

見dropdown是如何link的孩子？這意味着當您將mouseenter事件附加到您的link時，將鼠標懸停在dropdown上，實際上計數爲，如徘徊在link上方。編輯您的代碼（並採取了一些不必要的位）：

$(document).ready(function() { 
 
    $('.hidden-dropdown').hide(); 
 
    $('.link').mouseenter(function(){ 
 
    $(this).children('.hidden-dropdown').show(); 
 
    }); 
 
    $('.link').mouseleave(function(){ 
 
    $(this).children('.hidden-dropdown').hide(); 
 
    }); 
 
});

.link { 
 
    position: relative; 
 
    height: 20px; 
 
    background-color: #ccc; 
 
} 
 
.hidden-dropdown { 
 
    position: absolute; 
 
    top: 20px; 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link"> 
 
    <p>Product</p> 
 
    <div class="hidden-dropdown"> 
 
    <div class="row"> 
 
     <div class="small-6 large-6 columns"> 
 
     <ul style="position: relative; float: left;"> 
 
      <li><a href="#">Motion Sensor</a></li> 
 
      <li><a href="#">Water Detector</a></li> 
 
      <li><a href="#">Smart Plug</a></li> 
 
      <li><a href="#">Door Sensor</a></li> 
 
      <li><a href="#">Door Sensor Pro</a></li> 
 
     </ul> 
 
     <ul style="position: relative; float: right;"> 
 
      <li><a href="#">Z-Wave Extender</a></li> 
 
      <li><a href="#">Siren</a></li> 
 
      <li><a href="#">Mouser</a></li> 
 
      <li><a href="#">Water Valve</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>