应用悬停鼠标时手风琴不会停止答案

【问题标题】：The accordion don't stop when applying a hover mouse应用悬停鼠标时手风琴不会停止
【发布时间】：2019-05-27 11:10:57
【问题描述】：

我正在使用手风琴显示每个类别的子类别。

我的问题是我无法转到某个类别的子类别，因为它在鼠标移出后关闭。

我想保持 html 的相同架构：
目前我有

jQuery(function($) {
  $('ul.r-list h1').hover(function() {
    $(this).next().stop(true, true).slideDown()
  }, function() {
    $(this).next().stop(true, true).slideUp()
  }).find($(this).next()).hide()
});

ul.r-list li ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
  <li>
    <h1>
      <span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
      <a class="category Parent" href="">Parent Category</a>
      <span>(8)</span>
    </h1>
    <ul>
      <li>
        <a class="category sub-category children1" href="">sub Category1</a>
        <span>(5)</span>
      </li>
      <li>
        <a class="category sub-category children2" href="">sub Category2</a>
        <span>(1)</span>
      </li>
      <li>
        <a class="category sub-category children3" href="">sub Category3</a>
        <span>(2)</span>
      </li>
    </ul>
  </li>
</ul>

预期结果：
当我转到子类别时，动画停止，当我将鼠标移出时，它会自动关闭。

当前结果：
当我转到子类别时，动画没有停止

提前致谢

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

监听整个ul.r-list li 的悬停事件，因此当您从h1 移动到ul 时不会触发mouse out 事件。然后在事件处理函数中找到当前this元素内的ul并向上/向下滑动。

jQuery(function ($) {
    $('ul.r-list li').hover(function () {
      $(this).find('ul').stop(true,true).slideDown()
    },function(){
      $(this).find('ul').stop(true,true).slideUp() 
    }).find($(this).next()).hide()
});

ul.r-list li ul {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
	<li>
		<h1>
			<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
			<a class="category Parent" href="">Parent Category</a>
			<span>(8)</span>
		</h1>
		<ul>
			<li>
				<a class="category sub-category children1" href="">sub Category1</a>
				<span>(5)</span>
			</li>
			<li>
				<a class="category sub-category children2" href="">sub Category2</a>
				<span>(1)</span>
			</li>
			<li>
				<a class="category sub-category children3" href="">sub Category3</a>
				<span>(2)</span>
			</li>
		
			
		</ul>
	</li>
</ul>

【讨论】：

【解决方案2】：

你很亲密。将类似 r-hasSublist 的类添加到公共 LI 元素（包装 H1 和 UL 子列表）。定位该类以保持悬停的mouseenter 事件处于活动状态。

在.hover() 方法中，您可以简单地使用$('> ul', this).stop().slideToggle();

jQuery(function($) {

  $('.r-hasSublist').hover(function() {
    $('> ul', this).stop().slideToggle();
  });
  
});

.r-hasSublist ul {
  display: none;
}

<ul class="r-list">
  <li class="r-hasSublist">
    <h1>
      <span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
      <a class="category Parent" href="">Parent Category</a>
      <span>(8)</span>
    </h1>
    <ul>
      <li>
        <a class="category sub-category children1" href="">sub Category1</a>
        <span>(5)</span>
      </li>
      <li>
        <a class="category sub-category children2" href="">sub Category2</a>
        <span>(1)</span>
      </li>
      <li>
        <a class="category sub-category children3" href="">sub Category3</a>
        <span>(2)</span>
      </li>
    </ul>
  </li>
</ul>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

【讨论】：