javascript - 如何设置子菜单以在桌面悬停并单击移动设备上打开？

Question

这是我的 JavaScript 代码。我有一个发发图标，我需要点击我的手机打开子菜单。当我在浏览器中从桌面切换到移动显示时，fa fa 元素没有得到事件，只有当我刷新页面时它才会得到事件。

if ($(window).width() < 992) {
    $('.toggle-submenu').click(function (e) {
        e.preventDefault();
        $(this).parent().next().next('.submenu').slideToggle();
    });
}

HTML

<li class="nav-item">
   <a class="nav-link" href="#">News
      <i class="toggle-submenu submenu-arrow fas fa-chevron-down"></i>
   </a>
   <span class="category-home"></span>
   <ul class="submenu">
      <li>
         <a href="#">Najnovije vesti</a>
      </li>
   </ul>
 </li>

移动 CSS

                ul.submenu{
                        display: none;
                        padding: 0 0 20px 30px;
                        list-style: none;
                        background: #FF9600;
                        li{
                            margin-bottom: 10px;
                            a{
                                color: #fff;
                                font-family: $roboto-medium;
                                font-size: 18px;
                            }
                            &:last-of-type{
                                margin-bottom: 0;
                            }
                        }
                    }             

停止 CSS

                    li{
                        width: auto;
                        display: flex;
                        height: 100%;
                        &:hover ul.submenu{
                            display: block;
                        }
                        ul.submenu{
                            min-width: 185px !important;
                            display: none;
                            position: absolute;
                            top: 100%;
                            padding: 20px;
                            list-style: none;
                            background: #FF9600;
  

标签： javascripthtmljquerycss