顯示/隱藏不會加載

單擊「查看更多」時，文本不會展開。怎麼來的？由於顯示/隱藏不會加載

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

非常感謝。你知道爲什麼「看多」必須點擊兩次才能顯示？ –

顯示/隱藏不會加載

回答

相關問題