显示/隐藏不会加载

单击“查看更多”时，文本不会展开。怎么来的？由于显示/隐藏不会加载

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

来源

2012-08-30 Marcus Silverman

请包括这个问题在您的代码。如果jsfiddle失败，你的问题将来对其他人来说毫无价值。另外请更详细地描述什么是不工作的。 –

好的，谢谢！ –

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

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

也是一个很简单的方法来达到同样的：

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

来源

2012-08-30 18:17:24 closure

您正在从HTML窗口呼叫showHide，但尚未定义showHide。只需在HTML窗口中的<script>块中包含showHide函数，它就可以工作。看到我的jsfiddle：http://jsfiddle.net/HGbSX/1/

无法点击两次以显示其他内容的额外问题与您的逻辑有关。当你第一次来的时候，那个元素的显示没有像你期望的那样被设置为none，而是空的字符串，所以它重新隐藏它。您可以通过颠倒你的逻辑来纠正这种情况，并寻找display='block'。看到我的jsfiddle：http://jsfiddle.net/HGbSX/2/

来源

2012-08-30 18:06:39

这是行不通的 – supersaiyan

你可以试试jquery – supersaiyan

哎呀，我忘了保存。固定。 –

代码是正确的;它不工作的原因是因为你设置了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的加载事件的匿名函数中定义showHide。如果您将第一个下拉列表更改为“无法换行（头）”，它将使JavaScript保持独立，您的onclick将能够看到定义的功能。

来源

2012-08-30 18:12:54

非常感谢。你知道为什么“看多”必须点击两次才能显示？ –

显示/隐藏不会加载

回答

相关问题