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

Question

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

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

我想保持相同的 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>

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

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

提前致谢

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

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