Mouseenter 仅在第一次 mouseenter 尝试时触发

Question

我试图在将鼠标悬停在其父 li 上时将每个 ul > li 向下滑动，然后在 mouseleave 事件

上将其向上滑动

该代码在第一个 mouseenter 和 mouseleave 上运行良好。但是当我将鼠标悬停在已经触发过一次的 panel 上时，mouseenter 函数不会第二次触发我知道我很接近但不确定哪里出错了

Fiddle 离开这里： http://jsfiddle.net/k2b5a62j/1/

我也尝试过 fiddle 和 hover，但没有成功

**为了简单起见，我对 fiddle 进行了一些更新

Answer 1

我很确定你的意思是，你希望在悬停时能够查看所有项目，而不是它们立即消失。我稍微更改了您的 DOM 和 jQuery 选择器以实现此目的：

//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
    $(this).find('ul').slideDown('fast', function(){
        // Done.
    });
    event.preventDefault();
}).on("mouseleave",function (event) {
    $(this).find('ul').slideUp('fast', function(){
        // Done.
    });
    event.preventDefault();
});

ul li ul {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li><div>
        <a href="#">Product1</a>
            <ul id="test">
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
            </ul>
        </div></li>
        <li><div><a href="#">Product2</a>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2</li>
                <li>Item product 2</li>
            </ul>
        </div></li>
        <li><div><a href="#">Product3</a>
            <ul>
                <li>Item product 2</li>
                <li>Item product 2</li>
            </ul>
        </div></li>
    </ul>
</div>

回复提问者关于让每里一次显示一个的评论：

jQuery(document).ready(function($) {

  $('.inner-link').hide();


  $('.link').mouseenter(function() {
    $(this)
     .find('ul')
      .find('li')
      .stop(true,true)
      .each(function(index) {
       $(this)
         .delay(500 * index)
          .slideDown(500);
     });
  });

  $('.link').mouseleave(function() {
    $(this)
     .find('ul')
      .find('li')
      .stop(true,true)
      .each(function(index) {
       $(this)
         .delay(500 * index)
          .slideUp(500);
     });
  });

});

.link {
  position: relative;
  right: 0%;
  width: 8%;
  list-style-type: none;
  vertical-align: middle;
  display: table-cell;
  outline: none;
  height: 100%;
  text-align: center;
  margin: 0px 11px;
}

.inner-list {
  position: absolute;
  width: 100%;
  margin: 0px auto;
  left: 0px;
}

.inner-link {
  list-style-type: none;
  width: 100%;
  margin: 0px 0px 0px -40px;
  border-bottom: 1px black solid;
}

.inner-link:first-child {
  padding-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
  <li class="link"><a href="">Panel 1</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Link #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 2</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Link #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 3</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Linnk #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>
  <li class="link"><a href="">Panel 4</a>
    <ul class="inner-list">
      <li class="inner-link">Link #1</li>
      <li class="inner-link">Link #2</li>
      <li class="inner-link">Linnk #3</li>
      <li class="inner-link">Link #4</li>
      <li class="inner-link">Link #5</li>
    </ul>
  </li>

</ul>

Mouseenter 仅在第一次 mouseenter 尝试时触发

Mouseenter only fires on first mouseenter attempt

javascript

jquery

hover

mouseenter

mouseleave