Question

编辑：部分内容来自@anji的评论，但主要问题仍然存在。当我在桌面视图上加载页面并调整大小到移动视图（低于991px）时，单击不会展开下拉列表。该错误是微妙的。当我不进行任何悬停或单击桌面大小时，移动版本将单击展开下拉菜单，但是如果我进行任何交互（例如将鼠标悬停在该下拉列表上或单击然后重新调整为移动视图大小），则单击按钮不会展开该下拉列表。但是单击显示为注册为从控制台找到的。

我正在尝试制作一个导航栏，其中水平版本将像往常一样工作，在悬停时会下拉子菜单，但是在垂直模式下（通过flex和media-query完成），将在鼠标单击或点击时触发下拉菜单手机屏幕。同样，在窗口调整大小时，当Chrome开发者工具将屏幕大小从移动设备增加到笔记本电脑时，下拉菜单也会消失。

到目前为止，我已使此部分正常工作，但未触发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!');
        }
    });
});

单击导航栏实现，将水平下拉菜单悬停到垂直下拉菜单

1 个答案: