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

问题在于您使用的visibilty属性。您必须使用display:none，以便在隐藏时项目不会占用空间。

而不是

visibility: hidden;

使用

display: none;

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

Answer 2

尝试 JQuery Toggle 功能来完成此任务：

 $(function(){
    $(".myclass").click(function () {
        $(".myclass").toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span class="myclass"> like </span>
    <span class="myclass" style="display:none"> unlike </span>
    </div>

如何在不删除javascript的情况下切换两个元素

2 个答案: