Question

我想为大型设备制作鼠标悬停事件，对于移动设备或任何其他小型设备，我想将其设为点击事件（因为鼠标悬停不适用于移动设备或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');
    });
}

Answer 1

您需要为移动设备添加onresize，因为它可以旋转。
更好地使用window.matchMedia
$（'。collapse.in'）。toggleClass（'in'） - 必须没有.in，因为它可以在首次使用后找到。
为移动设备使用toggleClass和fadeToggle。
添加mouseout以关闭活动元素。
$（this）.find仅为.open_products或.open_cart中的元素应用样式，以防它成为nessesery。


    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');
            });
        }
    }

Answer 2

我能想到的原因是：您发布的代码段是否可能在呈现按钮（'.open_cart'，'。。openn_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');
    });
}

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

亲切的问候，

大卫

将鼠标悬停在大型设备上，然后点击小型设备

2 个答案: