Question

目前我正在做的是：

    if ($( "#htmlBox" ).css("display") == "block") {
        $( "#htmlBox" ).css("display", "none");
    } else {
        $( "#htmlBox" ).css("display", "block");
    }

我想知道在这两个值之间切换的更快捷方式是什么。

Answer 1

在这种情况下，您只需使用toggle()在可见和隐藏显示状态之间来回切换：

$("#htmlBox").toggle();

如果您确实想使用css()，那么您可以在函数中提供新值，您可以使用该函数执行您需要的任何逻辑。此函数还接受当前值作为参数：

$('#htmlBox').css('display', function(i, state) {
  return state === 'none' ? 'block' : 'none';
});

一般来说，最好避免在可能的情况下使用css()，因为UI样式应仅保留在CSS中。将其放入JS可能会导致维护问题。以这种方式完成后，最好使用toggleClass()。

Answer 2

在您的示例中使用可见性时，正如已经建议的那样，toggle()效果最好，缩短初始代码，假设其他CSS示例可以使用Ternary Operator

虽然，是的，在您的具体情况下，toggle()是最好的！

$("#htmlBox").css("display", $("#htmlBox").css("display") == "block" ? "none" : "block");

是否有一种基于当前值更改css值的简单方法？

2 个答案: