点击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>