导航菜单不会根据屏幕大小从悬停切换到切换

Navigation menu not switching from hover to toggle based on the screen size

本文关键字：悬停 屏幕 菜单 导航      更新时间：2023-09-26

当屏幕宽度小于769px时，如何使网页按钮从悬停切换到切换。悬停或切换脚本是根据浏览器启动时的大小选择的，在更改大小时无法切换。

$(document).ready(myFunction);
function myFunction() {
  var ww = document.body.clientWidth;
  if (ww < 769) {
    $(".button").click(function() {
      $("ul").toggle();
    });
  } else {
    $(".button").hover(function() {
      $("ul").toggle();
    });
  }
}
.button {
  display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">Men</a>
<ul class="menu">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
</ul>

添加文档就绪和调整大小事件，两者结合在一起，以确定文档何时就绪以及窗口何时调整大小。

我对事件进行了改进，看看on()函数

$(document).ready(myFunction);
$(window).on('resize', myFunction);
function myFunction() {
  var event;
  var ww = document.body.clientWidth;
  if (ww < 769) {
     event = "click";
  } else {
     event = "hover";
  }
    // here is the improvement
    $(".button").on(event, function() {
      $("ul").toggle();
    });
}
.button {
  display: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">Men</a>
<ul class="menu">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
</ul>

click和hover用于添加不触发事件的事件处理程序，以手动使事件使用trigger()。

相关文章：