下拉点击在手机上打开，悬停在桌面上答案

【问题标题】：Dropdown click open on mobile, hover on desktop下拉点击在手机上打开，悬停在桌面上
【发布时间】：2022-11-30 13:40:33
【问题描述】：

我试图在桌面上悬停时打开导航栏下拉菜单，并在移动设备上单击。我看过几个类似的问题，但认为我的方法更容易阅读并且在实践中可以顺利进行。

仅此代码就可以通过单击打开桌面和移动下拉菜单：

$('.anchor').click(function() { 
  $(this).siblings('.navigation__dropdown').slideToggle('slow');
});

我制作了以下 jQuery 函数，它已经过测试并且可以工作（根据 .css 和 .removeClass、console.log 等）。但是在这里，我添加了一个 .click 来在移动设备上打开下拉菜单，并添加了一个 .hover 来在桌面设备上打开下拉菜单：

(function ($) {
  $(function () {
    var mq = window.matchMedia('(max-width: 800px)');
    mq.addEventListener('change', function () {
      if (mq.matches) {
        $('.anchor').click(function() {
        $(this).siblings('.navigation__dropdown').slideToggle('slow');
      } else {
        $('.anchor').hover(function() {
        $(this).siblings('.navigation__dropdown').slideToggle('slow');
    });
  }
});

但是，在我以桌面宽度加载网站后，会发生以下情况：

桌面下拉菜单根本打不开（意外结果）。使用“文档就绪”简写，我认为它会在页面加载时检测视口宽度？
我将大小调整为移动设备，然后单击打开下拉菜单（期望的结果）。
我调整回桌面，悬停在下拉菜单上（期望的结果）。
我再次调整到移动设备，现在下拉菜单在悬停时打开（不希望的结果）。从这一点来看，两个视图都只锁定在悬停状态。
无论何时调用 .hover()（例如，无论是在 if 还是 else 中，结果总是停留在悬停动画上。

【问题讨论】：

标签： javascript html jquery css responsive-design

【解决方案1】：

通过使用 .on() 和 .hover() 与 .click() 和 hover.() 的组合解决了这个问题。

$('.anchor').on('click', function (e) {
        if (mq.matches) {
          e.preventDefault();
          $(this).next($('.navigation__dropdown')).slideToggle('fast');

          $('.navigation__dropdown').not($(this).siblings()).hide('fast');
          e.stopPropagation();
        }
      })
      $('.anchor').hover(function (e) {
        if (!mq.matches) {
          e.preventDefault();
          $(this).next($('.navigation__dropdown')).slideToggle('fast');

          $('.navigation__dropdown').not($(this).siblings()).hide('fast');
          e.stopPropagation();
        }
      })

【讨论】：