jquery - 启用和禁用单击时的默认行为

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