javascript - 显示/隐藏不会加载

Question

单击“查看更多”时，文本不会展开。怎么会？谢谢

HTML:

<div id="wrap">
      <h1>Show/Hide Content</h1>
      <p>
          This example shows you how to create a show/hide container using a 
          couple of links, a div, a few lines of CSS, and some JavaScript to 
          manipulate our CSS. Just click on the "see more" link at the end of 
          this paragraph to see the technique in action, and be sure to view the 
          source to see how it all works together. 
          <a href="#" id="example-show" class="showLink"
              onclick="showHide('example');return false;">
              See more.
          </a>
      </p>
      <div id="example" class="more">
         <p>
             Congratulations! You've found the magic hidden text! Clicking the 
             link below will hide this content again.
         </p>
         <p>
             <a href="#" id="example-hide" class="hideLink"
                 onclick="showHide('example');return false;">
                 Hide this content.
             </a>
         </p>
      </div>
   </div>​

Javascript:

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

CSS:

body {
    font-size: 62.5%;
    background-color: #777; 
}
#wrap {
    font: 1.3em/1.3 Arial, Helvetica, sans-serif;
    width: 30em;
    margin: 0 auto;
    padding: 1em;
    background-color: #fff; 
}
h1 {
    font-size: 200%; 
}
/* 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; 
}​

Live DEMO

Answer 1

您正在调用 showHide从 HTML 窗口，但是 showHide尚未定义。只需包括 showHide在 <script> 中发挥作用在 HTML 窗口中阻止，它将起作用。查看我的 jsfiddle:http://jsfiddle.net/HGbSX/1/

必须单击两次才能显示其他内容的其他问题与您的逻辑有关。第一次通过时，该元素的显示未设置为 none如您所料，但为空字符串，因此它重新隐藏了它。您可以通过反转您的逻辑并查找 display='block' 来更正此问题.查看我的 jsfiddle:http://jsfiddle.net/HGbSX/2/