带有悬停功能的IE 11中的Jquery问题

Question

我使用此代码通过两个或多个data-id来悬停菜单中的子项，并突出显示活动或不活动的项目。该代码在IE 11中不起作用。不会在项目中添加类。

下面的代码

$('.megamenu__list li[data-id]').hover(function() {
  var $aHover = $(this);
  
  $('.megamenu__subcategory li').addClass('inactive').removeClass('child').filter(function() {
    return $(this).data('id').includes($aHover.data('id'));
  }).addClass('child').removeClass('inactive');

  $('.megamenu__list li[data-id]').removeClass('active');
  $(this).addClass('active');
});

li {
  display: inline-block;
}

a {
  text-decoration: none;
  color: black;
}

.active {
  border-bottom: 1px solid red;
}

.inactive a {
  color: grey;
}

.child {
  border-bottom: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="megamenu__list">
  <ul>
    <li data-id="1"><a href="#">Menu1</a></li>
    <li data-id="2"><a href="#">Menu2</a></li>
    <li data-id="3"><a href="#">Menu3</a></li>
  </ul>
</div>

<div class="megamenu__subcategory">
  <ul>
    <li data-id="[1]"><a href="#">SubMenu1</a></li>
    <li data-id="[2]"><a href="#">SubMenu2</a></li>
    <li data-id="[3,1]"><a href="#">SubMenu3</a></li>
  </ul>
</div>