javascript - jQuery 在桌面分辨率下禁用 SlideToggle

Question

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

• 在移动分辨率中，这些部分看起来像 Accordion 选项卡，只有标题可见，点击header元素内的 anchor 会触发slideToggle，从而显示/隐藏该部分中的其余内容。这有效。
• 在桌面分辨率中，这 3 个部分及其全部内容始终可见，因此基本上单击标题不会执行任何操作。当我以桌面分辨率加载/刷新页面时，单击标题 anchor 元素不会执行任何操作(这很好)，但如果我切换到移动分辨率，然后切换回桌面分辨率，然后单击标题 anchor 元素会切换内容，所以请告诉我，如何在桌面上停止这种幻灯片切换效果。

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

虽然取消绑定(bind)点击事件有效，但 $(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');
    } 
});