javascript - JQuery-Mouseleave不工作

javascript - JQuery-Mouseleave不工作,第1张

我在这里复制了我的问题 - jsfiddle

在mouseleave上,反向动画效果消失了。

我认为它与"显示"有关。财产,但我不知道如何解决这个问题。我猜这种情况发生的原因是由于" display:block"在悬停,但然后它恢复显示:无?

如果我然后强迫"显示:阻止"在子菜单元素上,它一次显示所有子菜单选项。

HTML

<nav>
  <ul class="level-2">
    <li class="has-child"> <a href="/clients/">Clients</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/clients/test1/">Test1</a> </li>
      </ul>
    </li>
    <li class="has-child"> <a href="/services/">Services</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/services/test2/">Test2</a> </li>
      </ul>
    </li>
  </ul>
</nav>

JQuery的

$(document).ready(function () {
    $('.level-2 li').on({
        mouseenter: function () {
            $('.submenu').stop().animate({ 'margin-left':"300px" }, 1000);
        },
        mouseleave: function () {
            $('.submenu').stop().animate({ 'margin-left':"-200px" }, 1000);
        }
    });
});

最佳答案:

1 个答案:

答案 0 :(得分:5)

问题是display: none分配给.submenu规则,因此只要您将光标移出元素,display就会设置为none,这将删除该项目被渲染。

&#13; &#13;
$(document).ready(function() {
  $('.level-2 > li').on({
    mouseenter: function() {
      $('.submenu', this).stop().removeClass('hidden').animate({
        'margin-left': "300px"
      }, 1000);
    },
    mouseleave: function() {
      $('.submenu', this).stop().animate({
        'margin-left': "-200px"
      }, 1000);
    }
  });
});
&#13;
nav ul li a {
  list-style: none;
  color: #cccccc;
}
.hidden {
  display: none;
}
.submenu {
  position: fixed;
  left: -120px;
  top: 0;
  width: 200px;
  height: 100%;
  background: #3a4247 none repeat scroll 0 0;
  z-index: -1;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul class="level-2">
    <li class="has-child"> <a href="/clients/">Clients</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/clients/test1/">Test1</a> </li>
      </ul>
    </li>
    <li class="has-child"> <a href="/services/">Services</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/services/test2/">Test2</a> </li>
      </ul>
    </li>
  </ul>
</nav>
&#13; &#13; &#13;

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复