0

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

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; 
}​

现场演示

4

3 回答 3

3

您正在showHide从 HTML 窗口调用，但showHide尚未定义。只需将该showHide函数包含<script>在 HTML 窗口中的一个块中，它就会起作用。请参阅我的 jsfiddle：http: //jsfiddle.net/HGbSX/1/

必须单击两次才能显示附加内容的附加问题与您的逻辑有关。第一次通过时，该元素的显示未设置none为您所期望的，而是设置为空字符串，因此它重新隐藏了它。您可以通过颠倒您的逻辑并寻找display='block'. 请参阅我的 jsfiddle：http: //jsfiddle.net/HGbSX/2/

于 2012-08-30T18:06:39.063 回答
1

代码正确；它不起作用的原因是您设置 jsfiddle 的方式。在右侧它要求一个框架/你希望你的 JS 出现的地方，你有 jQuery 和 onLoad（我相信默认值） - 这使得你的小提琴的结果代码看起来像这样：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
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';
      }
   }
}

});//]]>

这意味着您在 jQuery 的 load 事件的匿名函数中定义 showHide。如果您将第一个下拉列表更改为“不换行（头部）”，它将单独保留您的 JavaScript，并且您的 onclick 将能够看到定义的函数。

于 2012-08-30T18:12:54.290 回答
1

我已经纠正了一个小错误，它需要单击 2 次才能开始运行。刚刚替换 != 'none' 已替换为 == 'block'。此外，在 JSFiddle 中，您在“选择框架”下选择了错误的设置。它应该是“头无包装”。

http://jsfiddle.net/EMEL6/12/

也是一个非常简单的方法来实现相同的：

function showHide() {
    $('#example').toggle();
}
于 2012-08-30T18:17:24.407 回答