如何避免jQuery脚本之间的冲突导致移动分辨率中的动画跳跃

Question

我想显示每个类别的子类别。显示子类别的操作不同，我想在桌面分辨率下使用鼠标悬停，然后单击移动分辨率，问题是子类别的项目不在桌面分辨率下显示，并且当我们不使用条件时会跳动画的问题（$（window） .width（）> 1024）

我尝试通过使用移动分辨率中的条件（$（window）.width（）> 1024）使用此条件来禁用负责SlideUp和Slidedown的代码jquery脚本，但是桌面分辨率中的手风琴不起作用

，条件为（$（window）.width（）> 1024）：

预期结果：

• 通过使用Slideup和Slidedown在桌面分辨率下显示每个类别的子类别效果很好
• 以移动分辨率显示每个类别的带有点击操作的子类别，不显示动画

实际结果：

• 子类别的项目未以桌面分辨率显示
• 以移动分辨率显示每个类别的带有点击操作的子类别，不显示动画

jsfiddle with condition

无条件（$（window）.width（）> 1024）

预期结果：

• 通过使用Slideup和Slidedown在桌面分辨率下显示每个类别的子类别效果很好
• 以移动分辨率显示每个类别的带有点击操作的子类别，不显示动画

实际结果：

• 通过使用Slideup和Slidedown在桌面分辨率下显示每个类别的子类别效果很好
• 以移动分辨率显示每个类别的点击操作的子类别，带有跳跃动画

jsfiddle without condition

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()
});
}
else
{
$(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>