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

Question

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

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

在这里摆弄一下： http://jsfiddle.net/k2b5a62j/1/

我也试过hover 的小提琴，但没有运气

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

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>

回复提问者的评论，让每个 li 一次显示一个：

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>