Question

我去了girlswhogeek.com。他们的代码是我正在寻找的，因为它首先隐藏了元素，然后当你点击按钮时它会显示答案。只是它不会再次隐藏答案。

这是他们的代码：

<p><a href="#">What price are your apples?</a><br>
<span id="answer1" style="display:none;">Our apples are 30 pence 
each...</span></p>

<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display= 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display='none';
}
</script>

Answer 1

我不确定如何调用这些内容，例如<a id="btnID" onclick="showStuff('btnID')>Button</a> ......等等。

如果有两个按钮（或您选择的元素），请确保为一个按钮显示一个onclick事件并为另一个隐藏。如果仅使用一个，则可能需要基于是否显示的if语句。

Answer 2

以下是代码的工作示例...代码看起来正确您可能遇到调用方法错误的问题

＆＃13;

function showStuff(id) {
alert(id);
document.getElementById(id).style.display= 'block';
}
function hideStuff(id) {
alert(id);
document.getElementById(id).style.display='none';
}

＆＃13;

<input type="button" onclick="showStuff('test')" value="show"/>
<input type="button" onclick="hideStuff('test')" value="hide"/>
<div id="test">sample div</div>

＆＃13;

Answer 3

您可以在一个函数toggleStuff中执行此操作，例如： -

function toggleStuff(id) {
  if (document.getElementById(id).style.display == 'block') {
    document.getElementById(id).style.display = 'none';
  } else {
    document.getElementById(id).style.display = 'block';
  }
}

<p><a href="#" onclick="toggleStuff('answer1'); return false;">What price are your apples?</a><br><br>
  <span id="answer1" style="display: none;">Our apples are 30 pence each. If you buy 10 or more we can sell them at a discounted bulk rate of 25 pence each.</span></p>

它不会再次隐藏答案

3 个答案: