Question

我有一个响应式Javascript文件，可以在解绑基本jQuery函数上成功运行。

当浏览器设置为平板电脑时，导航将根据点击切换，因此我禁用链接到任何具有ul的li元素。

$('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').on('click', function(event) {
   event.preventDefault();
});

然后当浏览器大小超过平板电脑约束时，我试图用这个重新启用链接功能（我尝试了3种不同的方式）：

$('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').unbind('on');

$('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').unbind('click');

$('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').on('click', function(event) {
   return true;
});

如果我能提供其他可能有帮助的内容，请告知我

Answer 1

我能够在这里找到解决我自己问题的方法。以为我会张贴以防其他人有类似的问题。

我的自适应JavaScript每个屏幕大小有2个功能。我有这样的事情：

function tabletInit() {
 // add jQuery that is supposed to fire within these constraints
    function mobileNavInit() {
    var submenus = $('.main-navigation .children');

    submenus.each(function() {
      var parentLink = $(this).prev(),
          parentHref = parentLink.attr('href'),
          overview = '<li class="overview"><a href="'+parentHref+'">Overview</a></li>';

      $(overview).prependTo($(this));
    });

    }

    $('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').on('click', function(event) {
   event.preventDefault();
});

}

function tabletClear() {
 // undo or 'unbind()' anything that should be cancelled out if tablet is sized above

$(overview)unbind('prependTo');
$('.main-navigation .menu > ul > li > a, .main-navigation .menu > ul > li > ul > li:has(ul) > a').unbind('click');

}

干扰是概述功能的解除绑定之一。虽然取消绑定是根据需要执行的，但它最终干扰了其他一些JavaScript。所以我只是将其改为：

$('.overview, .overview2').remove();

.unbind（）无法处理event.preventDefault（）

1 个答案: