点击显示隐藏的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>

​

Answer 2

使用jquery可能很简单。给按钮一个id (例如id=‘button’)，然后在代码中显示div：$(‘#button’).hide()