Question

我想在屏幕尺寸小于768px时从某些导航链接中删除href属性。导航是使用ajax动态生成的，需要一些时间来加载。我尝试使用以下代码但它不起作用，但是当导航是静态的（而不是ajax）时它可以工作。

$(document).ready(function () {
 if ($(window).width() < 768) {
    $("#main-navigation > li.dropdown > a").removeAttr("href");
  }
});

感谢您的帮助

Answer 1

你必须跟踪调整大小。

$(document).ready(function () {
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $("#main-navigation > li.dropdown > a").removeAttr("href");
    }
  });
});

Answer 2

我会使用纯CSS解决方案来禁用链接＆＃34; funtionality＆＃34;在狭窄的屏幕上（写作时IE10 +）：

@media (max-width: 768px) {
  #main-navigation > li.dropdown > a {
    -ms-pointer-events: none;
    pointer-events: none;
  }
}

Answer 3

而不是尝试修改DOM，你可能会更好地使用＆＃39; live＆＃39;事件与CSS中的媒体查询结合使用，以设置不需要的链接的样式。

例如：

使用Javascript：

$(document).on('click touchstart', '#main-navigation > li.dropdown > a', function(event) {
  if ($(window).width() < 768) {
    event.stopPropagation();
    return false;
  }
});

CSS：

@media (max-width: 768px) {
  #main-navigation > li.dropdown > a {
    /*  remove unwanted styling  */
    text-decoration: none;
    color: #000;
  }
}

这将大大降低目标分辨率的性能开销（＆lt; 768似乎意味着移动用户，因为设备的处理能力可能受限）。

来自ajax动态加载导航的removeAttr（href）

3 个答案: