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）的内容：

praw

了解import praw r = praw.Reddit(client_id='insert id here', client_secret='insert secret here', user_agent='insert user agent') page = r.subreddit('aww') top_posts = page.hot(limit=None) for post in top_posts: print(post.title, post.ups)是否是<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上方。要编辑代码（并取出一些不必要的位）：

＆＃13;

dropdown

＆＃13;

link

＆＃13;

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

＆＃13;

点击ancor标签后，jQuery鼠标悬停将无法正常工作

1 个答案: