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

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>

我尝试修改 disabled 属性，但没有成功。如果您有任何建议，那就太好了。谢谢!

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>