Question

这个问题很简单。
我有一个切换div元素的按钮：

var status = false;
$("#tab").click(function () {
    if (status != true) {
        $(".container2").css({ "visibility": "visible" });
        status = true;
    } else {
        $(".container2").removeAttr('style');
        status = false;
    }
});

问题是，当它被隐藏时，它会占用“不可见”的空间，因此页面上的其他元素看起来都是错位的。

有没有办法可以完全删除我的DOM中的<div>元素，这样就不会占用空间，就像我一样：

visibility:hidden

如果我将如何使用jQuery .detach（）函数？我可以让它消失，但我无法再把它带回来。

Answer 1

使用以下remove()函数从DOM中删除元素。

$(".container2").remove();

更新如果您不想删除，请使用hide()和show()功能。

$(".container2").hide(); //to hide
$(".container2").show();  //to show

您还可以使用toggle()功能切换可见性。

$("#tab").click(function () {
    $(".container2").toggle();
});

Answer 2

你可以这样做：

JS

$("#tab").click(function () {
    $(".container2").toggle();
});

Reference

Answer 3

如果您只想隐藏它并将其从流中删除（而不是直接删除），$(".container2").hide();。

或者，display:none通过CSS，$(".container2").css("display:none");执行相同的操作，但更明确。

再次显示，您可以使用$(".container2").show();或将显示设置回阻止$(".container2").css("display:block");。

.hide()还有其他jQuery替代方案，例如.toggle() .fade()和.slide()，除了从文档流程中删除它之外，它还会为hide / show设置动画

http://api.jquery.com/

css完全删除而不仅仅是可见性：隐藏

3 个答案: