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上监听悬停事件，因此当您从mouse out移到h1时，ul事件不会触发。然后在事件处理函数中，在当前ul元素内找到this并将其向上/向下滑动。

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

你很近。向公共LI元素（包装H1和UL子列表）添加类似r-hasSublist的类。定位该类以使悬停的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>

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

2 个答案: