阻止禁用的元素更改页面大小？

Question

我有一个搜索栏，上方有一个切换按钮。单击切换按钮时，它会逐渐更改不透明度。它工作得很好，但看起来有点笨重，因为当我禁用它（因此隐藏元素）时，它会改变我的页面大小。是否有另一种禁用和隐藏元素的方法？

使用Javascript：

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  var display = getComputedStyle(searchbar).display;
  if (display == "none") {
    searchbar.style.opacity = 0;
    searchbar.style.display = "block";
    var i = 1;

    function IncreaseOpacity() {
      setTimeout(function() {
        searchbar.style.opacity = i * .1;
        i++;
        if (i <= 10) {
          IncreaseOpacity();
        }
      }, 30)
    }
    IncreaseOpacity();
  } else {
    var v = 10;

    function DecreaseOpacity() {
      setTimeout(function() {
        searchbar.style.opacity = v * .1;
        v--;
        if (v >= 0) {
          DecreaseOpacity();
        } else {
          searchbar.style.display = "none";
        }
      }, 30)
    }
    DecreaseOpacity();
  }
}

HTML:

<div class="search-button">
  <p onclick="ToggleSearchBar()">Search</p>
  <form id="SearchBar">
    <input type="text" placeholder="        Your query here">
  </form>
</div>

我试图修补残疾人的财产，但这没有成功。如果您有任何建议，那就太棒了。谢谢！

Answer 1

我把你的display = "none"换成了visibility = "hidden"。这应该可以解决问题。

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  var display = getComputedStyle(searchbar).display;
  if (display == "none") {
    searchbar.style.opacity = 0;
    searchbar.style.display = "block";
    var i = 1;

    function IncreaseOpacity() {
      setTimeout(function() {
        searchbar.style.opacity = i * .1;
        i++;
        if (i <= 10) {
          IncreaseOpacity();
        }
      }, 30)
    }
    IncreaseOpacity();
  } else {
    var v = 10;

    function DecreaseOpacity() {
      setTimeout(function() {
        searchbar.style.opacity = v * .1;
        v--;
        if (v >= 0) {
          DecreaseOpacity();
        } else {
          searchbar.style.visibility = "hidden";
        }
      }, 30)
    }
    DecreaseOpacity();
  }
}

<div class="search-button">
  <p onclick="ToggleSearchBar()">Search</p>
  <form id="SearchBar">
    <input type="text" placeholder="        Your query here">
  </form>
</div>

Answer 2

我不知道你的css风格怎么样！但是为了防止页面调整大小，您可以为父元素设置固定属性。举个例子，我给父级.search-button类赋予固定高度，你可以通过重新生成它来做自己的

function ToggleSearchBar() {
            var searchbar = document.getElementById("SearchBar");
            var display = getComputedStyle(searchbar).display;
            if (display == "none") {
                searchbar.style.opacity = 0;
                searchbar.style.display = "block";
                var i = 1;
                function IncreaseOpacity() {
                    setTimeout(function(){
                        searchbar.style.opacity = i * .1;
                        i++;
                        if (i <= 10) {
                            IncreaseOpacity();
                        }
                    }, 30) 
                }
                IncreaseOpacity();
            } else {
                var v = 10;
                function DecreaseOpacity() {
                    setTimeout(function(){
                        searchbar.style.opacity = v * .1;
                        v--;
                        if (v >= 0) {
                            DecreaseOpacity();
                        } else {
                            searchbar.style.display = "none";
                        }
                    }, 30)
                }
                DecreaseOpacity();
            }
        }

.search-button {
background :#eee;
padding:10px;
height:100px;
}

<div class = "search-button">
        <p onclick = "ToggleSearchBar()">Search</p>
        <form id = "SearchBar">
            <input type = "text" placeholder = "        Your query here">
        </form>
    </div>

Answer 3

是否有另一种禁用和隐藏元素的方法？

• 您可以使用“visibility：hidden”属性而不是“display：none”。元素被隐藏（但仍然占用空间）

https://www.w3schools.com/cssref/pr_class_visibility.asp