javascript - 悬停的水平下拉菜单到点击导航栏实现的垂直下拉菜单

Question

编辑:@anji 的评论已部分修复，但主要问题仍然存在。当我在桌面 View 上加载页面并将大小调整为移动 View (低于 991 像素)时，单击不会展开下拉列表。这个错误很微妙。当我不进行任何悬停或单击桌面尺寸时，移动版本单击会展开下拉列表，但如果我进行任何交互，例如将鼠标悬停在下拉列表上或单击然后调整大小到移动 View ，则单击按钮不会展开下拉列表。但单击显示为从控制台找到的已注册。

<小时/>

我正在尝试制作一个导航栏，其中水平版本将像往常一样工作，在悬停时下拉子菜单，但在垂直模式下(使用 Flex 和媒体查询完成)，下拉菜单将在鼠标单击或点击时触发电话屏幕。此外，在调整窗口大小时，当通过 chrome devtools 将屏幕尺寸从移动设备增加到笔记本电脑时，下拉菜单将消失。

到目前为止，我已经完成了这部分工作，但 onClick 事件没有被触发。同样在本地版本中，当我在移动版本中重新加载页面时，它会起作用，而不是在调整大小时起作用。这是我用代码创建的代码笔:

https://codepen.io/rpmcmurphy/pen/pMLoOE?editors=0110

预期行为:

• 在大屏幕上悬停时下拉菜单
• 在移动设备上点击时出现下拉菜单
• 在移动设备上打开下拉菜单时，调整大小到大屏幕时，下拉菜单将会消失

问题单击事件未触发预期行为(在窗口调整大小和加载时)，而控制台表示单击已被注意到。

完整代码如下:

HTML-

<div class="container mt-5">
  <div class="row">
    <div class="col-12">
      <div class="menu-wrapper">
        <ul>
          <li class="has-submenu">
            <a href="">
              Has submenu
            </a>
            <ul class="nav-submenu">
                <li>
                  <a href="">
                    Analytics
                  </a>
                </li>
                <li>
                  <a href="">
                    Crypto
                  </a>
                </li>
                <li>
                  <a href="">
                    Call center
                  </a>
                </li>
              </ul>
          </li>
          <li>
            <a href="">
            Contracts
            </a>
          </li>
          <li>
            <a href="">
            Listings
            </a>
          </li>
          <li>
            <a href="">
            Contact lists
            </a>
          </li>
          <li>
            <a href="">
            Others
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

SCSS-

    .menu-wrapper {
  background-color: #f5f5f5;

  @media only screen and (max-width: 991px) {
    width: 220px;
    max-width: 220px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
  }

  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-contents: space-between;
    flex-direction: row;

    @media only screen and (max-width: 991px) {
      flex-direction: column;
    }

    > li {
      flex: 1;
      position: relative;

      &.has-submenu {
        background-color: #d3d3d3;
      }

      > a {
        display: inline-block;
        padding: 10px 15px;

        &:hover {
          text-decoration: none;
        }
      }

      > ul {
          display: none;
          flex-direction: column;
          position: absolute;
          text-align: left;
          width: 220px;
          background-color: #f9f9f9;
          top: 100%;

          @media only screen and (max-width: 991px) {
            position: static;
            width: 100%;
            top: auto;

            &.drop-down {
              display: flex;
            }
          }

          li {
            flex: 1;

            a {
              display: inline-block;
              padding: 10px 15px;
            }
          }
        }

      @media only screen and (min-width: 991px) {
        &:hover {
          > ul {
            display: flex;
          }
        }
      }
    }
  }
 }

JS-

const mq = window.matchMedia('(max-width: 991px)');

function resized() {
  if(mq.matches) {
    $('body').on('click', '.has-submenu a', function(e) {
      e.preventDefault();
      $(this).children('.nav-submenu').toggleClass('drop-down');

      console.log('Clicked!');
    });
  }
}

resized();
$(window).resize(function() {
   resized();
   console.log('Resized!');
});

Answer 1

在调整大小的函数中使用next()方法而不是children()方法。

$(this).next('.nav-submenu').toggleClass('drop-down');

更新了调整大小问题的 jquery 代码:-

$(document).ready(function() {
  var isSmallWindow;
  checkResize();
  function checkResize(){
    isSmallWindow = $(this).width() <= 991;
  }
    $(window).on('resize', function() {
        checkResize();
    });

    $('.has-submenu a').on('click', function(e) {
        e.preventDefault();
        if (isSmallWindow){
          $(this).next('.nav-submenu').toggleClass('drop-down');

          console.log('Clicked!');
        }
    });
});