Javascript 鼠标悬停在大设备上，单击鼠标悬停在小设备上

我想为大型设备制作鼠标悬停事件，对于移动设备或任何其他小型设备，我想制作一个点击事件（因为鼠标悬停不适用于移动设备或iPad等）。我有这个jQuery代码，但它似乎不起作用。怎么了

if ($(window).width() < 991) {
    $('.open_products').on('click', function () {
        $('#sidebar').addClass('active');
        $('.overlay').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
    $('.open_cart').on('click', function () {
        $('#sidebarcart').addClass('active');
        $('.overlay2').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
} else {
    $('.open_products').on('mouseover', function () {
        $('#sidebar').addClass('active');
        $('.overlay').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
    $('.open_cart').on('mouseover', function () {
        $('#sidebarcart').addClass('active');
        $('.overlay2').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
}

if（$（窗口）.width（）<991）{
$（'.open_products'）。打开（'单击'，函数（）{
$（'侧栏'）.addClass（'活动'）；
$（'.overlay'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
$（'.open_cart'）。在（'click'，函数（）{
$（'sidebarcart'）.addClass（'active'）；
$（'.overlay2'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
}否则{
$（'.open_products'）。on（'mouseover'，function（）{
$（'侧栏'）.addClass（'活动'）；
$（'.overlay'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
$（'.open_cart'）。on（'mouseover'，function（）{
$（'sidebarcart'）.addClass（'active'）；
$（'.overlay2'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
}

我能想到的原因是： 您发布的代码片段是否可能在呈现按钮（'.open_cart'、'.open_products'）之前执行

还有，让我给你一个提示：尽量避免重复代码。您可以将两个事件侦听器外包到如下函数中：

if ($(window).width() < 991) {
    addProductAndCartEvtListeners();
} else {
    addProductAndCartEvtListeners();
}

function addProductAndCartEvtListeners() {
    $('.open_products').on('click', function () {
        $('#sidebar').addClass('active');
        $('.overlay').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
    $('.open_cart').on('click', function () {
        $('#sidebarcart').addClass('active');
        $('.overlay2').fadeIn();
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
}

if（$（窗口）.width（）<991）{
addProductAndCartEvtListeners（）；
}否则{
addProductAndCartEvtListeners（）；
}
函数addProductAndCartEvtListeners（）{
$（'.open_products'）。打开（'单击'，函数（）{
$（'侧栏'）.addClass（'活动'）；
$（'.overlay'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
$（'.open_cart'）。在（'click'，函数（）{
$（'sidebarcart'）.addClass（'active'）；
$（'.overlay2'）.fadeIn（）；
$（'.collapse.in'）.toggleClass（'in'）；
$（'a[aria expanded=true]'）。attr（'aria-expanded'，'false'）；
});
}

关于您的问题：如果我的第一个猜测不是解决方案，请提供更多信息，以便我能够提供帮助：）

亲切问候,

大卫

• 您需要为移动设备添加onresize，因为它可以旋转
• 更好地使用window.matchMedia
• $（'.collapse.in'）.toggleClass（'in'）-必须不带.in，因为它可以在第一个toogle之后找到
• 对移动设备使用toggleClass和fadeToggle
• 为关闭活动元件添加鼠标输出
• $（此）.find for仅为内部元素应用样式。打开\u产品或.open\u购物车，以防万一

jQuery（文档）.ready（函数（）{ MyEvents（）；window.onresize=MyEvents； }); 函数MyEvents（）{ if（window.matchMedia（（（最大宽度：991px）”）.matches）{ $（'.open_products'）。打开（'单击'，函数（）{ $（this）.find（“#边栏”）.toggleClass（'active'）； $（this.find（'.overlay'）.fadeToggle（）； $（this.find（'.collapse'）.toggleClass（'in'）； $（this.find（'a[aria expanded=true'））.attr（'aria-expanded'，'false'）； $（this.find（'a[aria-expanded=false'））.attr（'aria-expanded'，'true'）； }); $（'.open_cart'）。在（'click'，函数（）{ $（this）.find（'sidebarcart'）.toggleClass（'active'）； $（this.find（'.overly2'）.fadeToggle（）； $（this.find（'.collapse'）.toggleClass（'in'）； $（this.find（'a[aria expanded=true'））.attr（'aria-expanded'，'false'）； $（this.find（'a[aria-expanded=false'））.attr（'aria-expanded'，'true'）； }); }否则{ $（'.open_products'）。on（'mouseover'，function（）{ $（this.find（“#侧栏”）.addClass（'active'）； $（this.find（'.overlay'）.fadeIn（）； $（this.find（'.collapse'）.addClass（'in'）； $（this.find（'a[aria expanded=true'））.attr（'aria-expanded'，'false'）； }); $（'.open_cart'）。on（'mouseover'，function（）{ $（this.find（“#sidebarcart”）.addClass（'active'）； $（this.find（'.overlay2'）.fadeIn（）； $（this.find（'.collapse'）.addClass（'in'）； $（this.find（'a[aria expanded=true'））.attr（'aria-expanded'，'false'）； }); $（'.open_products'）。on（'mouseout'，function（）{ $（this.find（“#侧栏”）.addClass（'active'）； $（this.find（'.overlay'）.fadeOut（）； $（this.find（'.collapse'）.removeClass（'in'）； $（this.find（'a[aria-expanded=false'））.attr（'aria-expanded'，'true'）； }); $（'.open_cart'）。打开（'mouseout'，函数（）{ $（this.find（“#sidebarcart”）.removeClass（'active'）； $（this.find（'.overly2'）.fadeOut（）； $（this.find（'.collapse'）.removeClass（'in'）； $（this.find（'a[aria-expanded=false'））.attr（'aria-expanded'，'true'）； }); } }

---

多亏了罗伯特的帮忙，这没用。尝试在1时console.log（）某些内容。将呈现页脚，然后在添加事件侦听器时显示console.log（）。这样您就可以看到哪个代码首先被执行。 jQuery(document).ready(function(){ MyEvents();window.onresize=MyEvents; }); function MyEvents(){ if(window.matchMedia("(max-width:991px)").matches){ $('.open_products').on('click', function () { $(this).find('#sidebar').toggleClass('active'); $(this).find('.overlay').fadeToggle(); $(this).find('.collapse').toggleClass('in'); $(this).find('a[aria-expanded=true]').attr('aria-expanded', 'false'); $(this).find('a[aria-expanded=false]').attr('aria-expanded', 'true'); }); $('.open_cart').on('click', function () { $(this).find('#sidebarcart').toggleClass('active'); $(this).find('.overlay2').fadeToggle(); $(this).find('.collapse').toggleClass('in'); $(this).find('a[aria-expanded=true]').attr('aria-expanded', 'false'); $(this).find('a[aria-expanded=false]').attr('aria-expanded', 'true'); }); } else { $('.open_products').on('mouseover', function () { $(this).find('#sidebar').addClass('active'); $(this).find('.overlay').fadeIn(); $(this).find('.collapse').addClass('in'); $(this).find('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); $('.open_cart').on('mouseover', function () { $(this).find('#sidebarcart').addClass('active'); $(this).find('.overlay2').fadeIn(); $(this).find('.collapse').addClass('in'); $(this).find('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); $('.open_products').on('mouseout', function () { $(this).find('#sidebar').addClass('active'); $(this).find('.overlay').fadeOut(); $(this).find('.collapse').removeClass('in'); $(this).find('a[aria-expanded=false]').attr('aria-expanded', 'true'); }); $('.open_cart').on('mouseout', function () { $(this).find('#sidebarcart').removeClass('active'); $(this).find('.overlay2').fadeOut(); $(this).find('.collapse').removeClass('in'); $(this).find('a[aria-expanded=false]').attr('aria-expanded', 'true'); }); } }