javascript - 单击时显示隐藏的 div 和隐藏按钮

Question

我有一个 Javascript 函数可以在点击时打开隐藏的 div，但我还想在点击时删除/隐藏按钮。我知道这是可能的，但我想不通。

<span id="first_related">
    content 1
</span>

<span id="second_related" style="display:none;">
    content 2 hidden / display on click
</span>

<div class="clear"></div>
<div class="btn">
<input id="current_page_viewed_videos" type="hidden">
<input type="hidden" id="related_videos_delta"><a onclick="showDiv()">Show More</a>
</div>

<script type="text/javascript">
    function showDiv() {
       document.getElementById('second_related').style.display = "block";
       document.getElementById('open').style.display = "none";
    }
</script>

谢谢!

Answer 1

您的 Javascript 没问题，您只需要添加 <button id="open" onclick="showDiv()">click</button> :

function showDiv() {
  document.getElementById('second_related').style.display = "block";
  document.getElementById('open').style.display = "none";
}

<span id="first_related">
content 1
</span>

<span id="second_related" style="display:none;">
content 2 hidden / display on click
</span>

<button id="open" onclick="showDiv()">click</button>

对于更新的问题:

function showDiv() {
   document.getElementById('second_related').style.display = "block";
   document.getElementById('open').style.display = "none";
}

<span id="first_related">
    content 1
</span>

<span id="second_related" style="display:none;">
    content 2 hidden / display on click
</span>

<div class="clear"></div>
<div class="btn">
<input id="current_page_viewed_videos" type="hidden">
<input type="hidden" id="related_videos_delta"><a id="open" onclick="showDiv()">Show More</a>
</div>