单击时启用和禁用默认行为

Question

我有一个包含 header 和一些项目的清单。单击 header 切换项目的可见性。

但是，我想将 header 变成 link，对于更大的屏幕尺寸，此 header 不应切换其子项的可见性，而只是表现得像个正常人 link.

我无法让这部分工作。我添加了 return false/true，但它不起作用。有更好的方法吗？

js:

var header = $('h3');
var list = $('ul');
var width = $(window).width();

header.click(function() {
    collapse(this);
});

var collapse = function (el) {
    if ($(window).width() < 699) {
        $(el).next().slideToggle();
        return false;
    } else {
        $(el).next().show();
        return true;
    }
};

JsFiddle.

Answer 1

使用event.preventDefault();忽略link,

Fiddle

header.click(function(e) {
    collapse(this,e);
});

var collapse = function (el,event) {
    if ($(window).width() < 699) {
        event.preventDefault();
        $(el).next().slideToggle();

    } else {
        $(el).next().show();
    }
};

此外，我认为 else{..} 部分不是必需的，因为它无论如何都会导航到另一个 link 地址。

Answer 2

您可以在支持匹配 css 媒体查询的地方使用 window.matchMedia()。有关示例，请查看以下代码。

var media = window.matchMedia("(min-width: 699px)");

media.addListener(function(m)}{
    header.unbind('click');
    if(m.matches){
      e.preventDefault();
      $(el).next().slideToggle();
    }
})

如果媒体查询被 js 命中，这将绑定相应的点击处理程序。尝试一下，你会得到你想要的结果。我在您的代码中看到的一个缺陷是，如果用户尝试使用流畅的布局，它不会重新绑定事件。只会混淆。

单击时启用和禁用默认行为

Enabling and disabling default behaviour on click

jquery

slidetoggle