onclick 以显示 <p><h1><iframe> ，函数 showHide(shID）.

onclick to show <p><h1><iframe> , function showHide(shID)

本文关键字：showHide 函数 shID iframe onclick h1 显示更新时间：2023-09-26

我做了一个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>

你选错了元素：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>

onclick 以显示 <p><h1><iframe> ， 函数 showHide(shID）.

onclick to show <p><h1><iframe> , function showHide(shID)

onclick 以显示 <p><h1><iframe> ，函数 showHide(shID）.