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

Question

当屏幕宽度小于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>

Answer 1

添加文档就绪和调整大小事件，两者结合起来，以便在文档准备好时以及窗口调整大小时进行。

我对这些事件进行了改进，看一下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>

Answer 2

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