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

Question

我将鼠标ul > li悬停在其li上，然后将其滑回mouseleave事件

代码在第一个mouseenter和mouseleave上效果很好。但是，当我将鼠标悬停在已经触发一次的panel上时，mouseenter功能不会再触发第二次我知道我已经关闭但不是确定我哪里出错了

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

我已经尝试过hover小提琴，但没有运气

**为了简单起见，我已经更新了小提琴

Answer 1

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

＆＃13;

＆＃13;

//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();
});

＆＃13;

ul li ul {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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);
    	});
  });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;