Question

我有一个包含标题和一些项目的列表。单击标题可切换项目的可见性。

但是，我想将标题转换为链接，对于较大的屏幕尺寸，此标题不应切换其子项的可见性，而只是像普通链接一样。

我无法让这部分工作。我添加了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();忽略链接，

<强> 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{..}部分不会被要求，因为它无论如何导航到另一个链接地址。

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命中，这将绑定相应的点击处理程序。尝试一下，你会得到你想要的结果。我在你的代码中看到的一个缺陷是，如果用户尝试流畅的布局，它就不会重新绑定事件。只会混淆。

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

2 个答案: