Css 如何使按钮在单击时消失并显示另一个按钮？

某个按钮可以被屏蔽，但当你们点击按钮时，它就不再隐藏了

就像你有按钮，点击按钮，按钮消失，显示更多的3个按钮，如果你点击其中任何一个按钮，它会消失，显示更多的按钮

<button onClick="document.getElementById('d3').style.display='block'"></button>

---

考虑到您的解释没有给我太多的帮助，下面是我认为您正在寻找的一些东西的一个超级简单的实现

这里有一个工作演示：

CSS

#d3{
显示：无；
}

HTML和JavaScript

<input id="button" type="button" value="Show more" onclick="showMore()">
<div id="d3">
    <input type="button" value="Show less" onclick="showLess()">
    <input type="button" value="Show less" onclick="showLess()">
    <input type="button" value="Show less" onclick="showLess()">
</div>
<script type="text/javascript">
var button = document.getElementById("button");
var d3 = document.getElementById("d3");

function showMore() {
    button.style.display="none";
    d3.style.display="block";
}

function showLess() {
    button.style.display="inline-block";
    d3.style.display="none";
}
</script>

var button=document.getElementById（“按钮”）；
var d3=document.getElementById（“d3”）；
函数showMore（）{
button.style.display=“无”；
d3.style.display=“block”；
}
函数showLess（）{
button.style.display=“内联块”；
d3.style.display=“无”；
}

是，但询问代码的问题必须表明对所解决问题的理解程度最低。包括尝试过的解决方案、它们不起作用的原因以及预期结果。您能告诉我们您在JSFIDLE中尝试了什么吗？您发布的

onClick

事件中有什么不起作用？如果提供

id

和CSS匹配，它似乎会完全满足您的要求……等等！是html4吗

<input id="button" type="button" value="Show more" onclick="showMore()">
<div id="d3">
    <input type="button" value="Show less" onclick="showLess()">
    <input type="button" value="Show less" onclick="showLess()">
    <input type="button" value="Show less" onclick="showLess()">
</div>
<script type="text/javascript">
var button = document.getElementById("button");
var d3 = document.getElementById("d3");

function showMore() {
    button.style.display="none";
    d3.style.display="block";
}

function showLess() {
    button.style.display="inline-block";
    d3.style.display="none";
}
</script>