我有一个搜索栏,上面有一个切换按钮。当我单击切换按钮时,它会逐渐改变不透明度。它工作得很好,但它看起来有点笨拙,因为当我禁用它(从而隐藏元素)时,它会改变我页面的大小。是否有禁用和隐藏元素的替代方法?
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();
}
}
<div class="search-button">
<p onclick="ToggleSearchBar()">Search</p>
<form id="SearchBar">
<input type="text" placeholder=" Your query here">
</form>
</div>
我尝试修改 disabled 属性,但没有成功。如果您有任何建议,那就太好了。谢谢!
最佳答案
我将您的 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>
关于javascript - 阻止禁用元素更改页面大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54798483/