有没有一种方法可以避免在移动分辨率下跳过slideDown（）和SlideUp（）动画的问题？

Question

我想显示每个类别的子类别。 显示子类别的操作不同，我想在桌面分辨率中使用悬停，然后单击以获取移动分辨率 问题是子类别的项目未以桌面分辨率显示 和不使用条件if（$（window）.width（）> 1024）时动画跳转的问题

我试图禁用负责移动分辨率上下滑动的代码jquery脚本

if($(window).width() >1024)  {
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()
});
}

但它不起作用

预期结果：

• 在移动分辨率下跳动画没有问题
• 使用上下滑动键以桌面分辨率显示每个类别的子类别效果很好

实际结果：

• 子类别的项目未以桌面分辨率显示
• 不使用条件if（$（window）.width（）> 1024）时动画跳转的问题

if($(window).width() >1024)  {
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()
});
}
$(document).ready(function(event){
    
    $('.r-list h1 span').click(function(){
        
      var $parent     = $(this).parent().parent();
      if($parent.hasClass('active')){
        $parent.removeClass('active');
        $(this).find('i').removeClass('fa-caret-down');
        $(this).find('i').addClass('fa-caret-right');
      } else {
        $parent.addClass('active');
        $(this).find('i').removeClass('fa-caret-right');
        $(this).find('i').addClass('fa-caret-down');
      }
     
        
    });
    });

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

}
.fa 
{
  display:none;
 }

ul.r-list{
  list-style:none;
 }
 ul.r-list a{
   text-decoration:none;
 }
 @media only screen and (max-width: 1024px)
 {
  
 ul.r-list li h1 {
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   
    font-weight: bold;
    font-size: 16px;
   
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    border-color: #eaeaea;
    color: #069;
    background-color: #f7f7f7;
    text-shadow: 0 1px 1px white;
}

ul.r-list li a.sub-category {
    text-decoration: none;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold;
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    font-size: 0.8em;
    border-color: #eaeaea;
    color: #069;
    background-color: #f7f7f7;
    text-shadow: 0 1px 1px white;
   
    
}

.fa {
    display: block;
    float: left;
    width: 12px;
    
 }
 ul.r-list li {
    
    position: relative;
    margin-bottom: 5px;
    margin-right:0;
    padding: 0;
   
}
ul.r-list li ul{
    -webkit-transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
ul.r-list li.active ul{
    opacity: 1;
    height: auto;
    margin:0;
    padding:5px 0 0 0;
    margin-bottom:5px;
    width:100%;
    display:block;
}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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 Category1</a>
			
		</h1>
		<ul>
			<li>
				<a class="category sub-category children1" href="">sub Category1</a>
				
			</li>
			<li>
				<a class="category sub-category children2" href="">sub Category2</a>
				
			</li>
			<li>
				<a class="category sub-category children3" href="">sub Category3</a>
				
			</li>
		
			
		</ul>
	</li>
</ul>
<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 Category2</a>
			
		</h1>
		<ul>
			<li>
				<a class="category sub-category children1" href="">sub Category1</a>
				
			</li>
			<li>
				<a class="category sub-category children2" href="">sub Category2</a>
				
			</li>
			<li>
				<a class="category sub-category children3" href="">sub Category3</a>
				
			</li>
		
			
		</ul>
	</li>
</ul>

in jsfiddle