onclick 显示 <p><h1><iframe> ，函数 showHide(shID)答案

【问题标题】：onclick to show <p><h1><iframe> , function showHide(shID)onclick 显示 <p><h1><iframe> ，函数 showHide(shID)
【发布时间】：2015-01-20 07:35:50
【问题描述】：

我做了一个 onclick showHide 功能，但在一个部分中只显示 1 个元素。当人们点击阅读更多按钮时，将显示段落以及视频或一些图像。如何点击显示标题、段落和 iframe？感谢帮助！

<style type="text/css">
   /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }
</style>



<div id="wrap">
<a href="#" id="example-show" class="showLink" onclick="showHide('example');">
<button class="btn-u btn-u-lg btn-block btn-u-dark-orange">
Read More
</button>
</a>
<div id="example" class="more">
<iframe width="600" height="315" src="//www.youtube.com/embed/BaPlMMlyM_0" frameborder="0" allowfullscreen></iframe>
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
</div>
</div>  

<!-- Hide Function -->           
<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>

【问题讨论】：

您的代码运行良好：JSFiddle。如果您在 localhost 或 localfile 上进行测试，请注意您使用的协议。在 iFrame src 中，您有 src="//www.youtube..." 。将其更改为src="http://www.youtube..." 。
嗨 Nomeaning25 。谢谢你告诉我，我再次检查并测试它现在可以工作了。 =D

标签： javascript onclick show-hide

【解决方案1】：

您选择了错误的元素：shID+'-show' = 'example-show'，此 id 不是隐藏 div 的。这是我认为您想要实现的工作版本。

function showHide(shID) {
  var hiddenDiv = document.getElementById(shID);
  if ( hiddenDiv ) {
    if (hiddenDiv.style.display !== 'none') {
      hiddenDiv.style.display = 'none';
    }
    else {
      hiddenDiv.style.display = 'inline';
    }
  }
}

/* This CSS is used for the Show/Hide functionality. */
.more {
  display: none;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666; 
}
a.showLink, a.hideLink {
  text-decoration: none;
  color: #36f;
  padding-left: 8px;
  background: transparent url(down.gif) no-repeat left; 
}
a.hideLink {
  background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
  border-bottom: 1px dotted #36f;
}

<div id="wrap">
  <a href="#" id="example-show" class="showLink" onclick="showHide('example');">
    <button class="btn-u btn-u-lg btn-block btn-u-dark-orange">
      Read More
    </button>
  </a>
  <div id="example" class="more">
    <iframe width="600" height="315" src="//www.youtube.com/embed/BaPlMMlyM_0" frameborder="0" allowfullscreen></iframe>
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
  </div>
</div>

【讨论】：