Question

我已经完成了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>

Answer 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>

onclick显示<p> </p> <h1> <iframe>，功能showHide（shID）</iframe> </h1>

1 个答案: