单击ancor标记后，jQuery鼠标操作将无法工作

Question

我编写了一些jQuery，以便当鼠标进入一个区域时，jQuery删除一个显示:隐藏；属性。

但是，当第一次加载页面时，当单击其中一个锚标记时，在未隐藏的元素中，鼠标将打开菜单，但一旦鼠标移动到菜单上，则不会保持打开状态。

我该怎么解决这个问题？

​

$(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

使下拉菜单成为导航链接的子程序.

假设您希望导航/下拉列表类似于本站，我总是使用类似于以下结构(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>

​