Question

我有一个包含3个部分的侧边栏：

在移动设备分辨率中，这些部分看起来像手风琴标签，只有标题可见，点击标题元素内的锚点触发slideToggle，显示/隐藏该部分中的其他内容。这有效。
在桌面分辨率中，3个部分及其整个内容始终可见，因此基本上点击标题不应该做任何事情。当我以桌面分辨率加载/刷新页面时，单击标题锚元素并不做任何事情（这很好）但是如果我切换到移动分辨率然后切换回桌面分辨率然后单击标题锚元素切换内容，所以请让我知道，如何在桌面上停止这个slideToggle效果。

jQuery代码：

$(window).on('load resize', function(){     

   if ($('#page-content').width() < 991 ) {

        $('#primary-sidebar header > a').click(function(e) {
            e.preventDefault();
            $(this).parent('header').siblings('.widget').slideToggle();
        });
   } else if ($('#page-content').width() > 992 ) {

        $('#primary-sidebar header > a').click(function(e) {
            return false;
        });
   }
});

感谢!!!

Answer 1

虽然取消绑定点击事件有效，$(window).on('load resize', function(){正在创建问题，但在调整窗口大小时，slideToggle效果会在单击时多次运行。窗口调整大小/加载代码行不需要。以下是适合我的代码。

 $('#primary-sidebar header > a').on('click', function(e) {
    e.preventDefault();

    var width = $('#page-content').width();

    if (width <= 991) {
        $(this).parent('header').siblings('.widget').slideToggle();
        $(this).find('.fa.fa-chevron-left').toggleClass('fa-chevron-down');
    } 
});

jQuery在桌面分辨率

1 个答案: