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

您正在从HTML窗口调用showHide，但尚未定义showHide。只需在HTML窗口的showHide块中包含<script>函数即可。请参阅我的jsfiddle：http://jsfiddle.net/HGbSX/1/

必须单击两次才能显示其他内容的其他问题与您的逻辑有关。第一次通过时，该元素的显示不会像您期望的那样设置为none，而是设置为空字符串，因此它会重新隐藏它。您可以通过反转逻辑并查找display='block'来解决此问题。请参阅我的jsfiddle：http://jsfiddle.net/HGbSX/2/

Answer 2

代码是正确的;它不起作用的原因是因为你设置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。如果您将第一个下拉列表更改为“no wrap（head）”，它将保留您的JavaScript，并且您的onclick将能够按定义查看该函数。

Answer 3

我已经纠正了一个小错误，它需要2次点击才能启动功能。刚刚更换！='none'已被=='block'取代。此外，在JSFiddle中，您在“选择框架”下选择了错误的设置。应该是“没有包装”。

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

同样是一种非常简单的方法：

function showHide() {
    $('#example').toggle();
}

显示/隐藏不会加载

3 个答案: