WordPress子菜单悬停和Onclick

Question

我尝试使用jQuery的fadeIn和css可见性，但是没有运气。有人可以帮我吗？

我将.menu-item-has-children用作父菜单，将.sub-menu用作子菜单。我想实现：

1. 在显示子菜单时添加过渡
2. 在on-item-has-children中添加onclick（向下箭头不显示/向上箭头以显示）

.menu-item-has-children {}

.sub-menu {
  z-index: 999;
  min-width: 200px;
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  background-color: #e6e6e6;
}

.menu-item-has-children:after {
  content: "\f0dd";
  font-family: 'Font Awesome 5 Free';
  left: 85%;
  position: absolute;
  top: 50%;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

ul.sub-menu li {
  display: block;
  text-align: left;
}

li.menu-item-has-children:hover .sub-menu {
  display: block;
  transition: all 300ms ease-in-out;
}

ul.sub-menu li a {
  padding: 10px 30px;
  color: #808080;
  text-transform: capitalize;
}

ul.sub-menu li a:hover {
  color: #000;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <?php 
          // navigation menu
          wp_nav_menu(array(
            'theme_location' => 'primary',
            'menu_class' => 'primary-menu',
            'container' => false,
            'items_wrap' => '%3$s'
          ));
        ?>
      </ul>
    </div>
  </div>
</nav>

Image