這是我的“查看更多”按鈕的 javascript 代碼。我怎樣才能讓它在點擊時消失?
function myFunction() {
var x = document.getElementById("dsec");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "block";
}
}
</script>
uj5u.com熱心網友回復:
您將需要為您的按鈕提供一個 ID,并為您的描述塊做同樣的事情。
IE:
function myFunction() {
var x = document.getElementById("dsec");
var btn= document.getElementById("btn");
if (x.style.display === "none") {
x.style.display = "block";
btn.style.display = "none";
} else {
x.style.display = "none";
btn.style.display = "block";
}
}
</script>
...或類似的。我不完全確定是什么觸發了您的“myFunction”或您的參考......但這個概念就在那里。
將來,添加更多背景關系和拼寫檢查代碼以使其更容易提供幫助是值得的。
我還會注意到@Scott Marcus 建議使用實際樣式而不是行內內容是更好的整體技術。
uj5u.com熱心網友回復:
請檢查您的按鈕 ID 和選擇器,以確保其正確,無論如何這里有一個作業代碼。如果您需要以簡單的方式隱藏按鈕,只需將其顯示值設定為無。這就像更改 display 的 css 值,但您只是使用 javascript。您可以使用的另一個選項是我相信將其從 DOM 中洗掉。
function myFunction() {
var x = document.getElementById("button");
x.style.display = "none"; //just let the css value of button to none
}
<button onclick="myFunction()" id="button">Click Me</button>
var x = document.getElementById('button');
x.onclick = function () {
document.getElementById('button').remove();
this.remove();
};
<button onclick="myFunction()" id="button">Click Me</button>
uj5u.com熱心網友回復:
您應該盡可能避免使用行內樣式,而是依賴 CSS 類,這些類要簡單得多:
// Get the references you'll need just once, not every time the function runs
let content = document.querySelector(".partial");
// Set up event handlers using the modern, standard approach
document.getElementById("seeMore").addEventListener("click", function(){
this.classList.add("hidden"); // Just add the CSS class
content.classList.remove("partial"); // Show the full text
});
/* This class can be added or removed to any element when it needs
to be shown or hidden. */
.hidden { display:none; }
.partial { height:40px; overflow:hidden; }
<div class="partial">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<button type="button" id="seeMore">See More</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/425230.html
標籤:javascript 按钮
