javascript - 如何在 javascript 中切换两个元素而不删除

Question

我有这个html

<div>
<span data-disabled class="myclass"> like </span>
<span class="myclass"> unlike </span>
</div>

scss是这样的

myclass{
     visibility: visible;
        cursor: pointer;

        &[data-disabled] {
            visibility: hidden;
        }
}

基于点击我正在这样做

        this.select('like').attr('data-disabled', true);
        this.select('unlike').removeAttr('data-disabled');

它工作正常，但我的喜欢和不喜欢彼此相邻显示，并且它们隐藏并在原始位置变得可见。

有什么办法可以拥有相同的位置，当我隐藏和取消隐藏时，它们会互相覆盖。

Answer 1

问题出在您正在使用的可见性属性上。您必须使用 display:none 以便该项目在隐藏时不会占用空间。

而不是

visibility: hidden;

使用

display: none;

您可以阅读有关 it here 的更多信息.