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

showHideHTML ウィンドウから呼び出していますが、showHideまだ定義されていません。HTML ウィンドウshowHideのブロックに関数を含めるだけで機能します。<script>私のjsfiddleを参照してください：http://jsfiddle.net/HGbSX/1/

追加のコンテンツを表示するために 2 回クリックする必要があるという追加の問題は、ロジックに関係しています。初めて訪れたとき、その要素の表示は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 に答える