0

JavaScript:

  function showOrHide()  
  { 
      var div = document.getElementByClass("showorhide"); 
      if (div.myDivClass.display == "block")  
      { 
          div.myDivClass.display = "none"; 
      } 
      else  
      { 
          div.myDivClass.display = "block"; 
      } 
  }

CSS:

.showorhide {
    display: none;
    padding: 12px 0px 12px 0px;
}

html:

<div align="left" style="padding-bottom:3px;"><font size="5">Chat Issues:</font></div>
<a href="javascript:showOrHide();"><font size="3">Are there any age requirements?</font></a> 
<ul style="margin:0px 0px 0px 0px;">
    <div class="showorhide">
        <li>Yes. You must be 13 years of age or older to use our chatrooms. Anyone under the age of 13 will be directed to a chatroom more suitable for their age.</li>
    </div>
</ul>
<a href="javascript:showOrHide();"><font size="3">Can i advertise in your chatroom? </font></a> 
<ul style="margin:0px 0px 0px 0px;">
    <div class="showorhide">
        <li>Absolutely not! Advertising is strictly prohibited and anyone caught advertising will be banned without warning.</li>
    </div>
</ul>

以前はうまく機能するdiv IDがありましたが、IDを変更して大量のコードを作成せずに同じIDと複数の表示/非表示を使用する必要があるため、これをクラスに変更しようとしましたが、取得できないようです仕事に。コンテンツを非表示にしますが、クリックしても表示されません。何か提案はありますか?

4

5 に答える 5

1

問題をよりよく理解できるようになりました。マークアップの変更にも注意してください。マークアップ内のスペースによって作成された可能性のあるジャンク テキスト ノードを破棄する必要があることに気付くでしょうが、これは機能するはずです。この特定のケースでは、ライブラリを使用すると、作成する必要のあるコードが大幅に削減されます。jQuery はかなり一般的なものです。 http://jsfiddle.net/Hx5uD/2/

  function showOrHide(clickedAnchorElement) {
      var i, toggleableElements, firstNonTextSibling = clickedAnchorElement;
      do {
          firstNonTextSibling = firstNonTextSibling.nextSibling;
      } while (firstNonTextSibling && firstNonTextSibling.nodeType == 3);

      toggleableElements = firstNonTextSibling.getElementsByClassName('showorhide');

      if (!toggleableElements) {
          return;
      }
      for (i = toggleableElements.length - 1; i >= 0; i--) {
          if (toggleableElements[i].style.display == "block") {
              toggleableElements[i].style.display = "none";
          } else {
              toggleableElements[i].style.display = "block";
          }
      }
  }
于 2013-03-03T08:10:37.253 に答える
0

div を一意にする必要があります。そうしないと、現在の JavaScript コードですべての div が表示および非表示になります。さらに、現在の JavaScript コードは機能しません.getElementByClassName("showorhide")。複数の要素を取得していて、それを単一の要素として使用しているためです。

html を次のように変更します。

<div align="left" style="padding-bottom:3px;">
      <font size="5">Chat Issues:</font>
 </div>
 <a href='javascript:showOrHide("div1");'>
      <font size="3">Are there any age requirements?</font>
 </a> 
 <ul style="margin:0px 0px 0px 0px;">
      <div id="div1">
          <li>Yes. You must be 13 years of age or older to use our chatrooms. Anyone under  
              the age of 13 will be directed to a chatroom more suitable for their age.
          </li>
      </div>  
 </ul>
 <a href='javascript:showOrHide("div2");'>
      <font size="3">Can i advertise in your chatroom? </font>
 </a> 
 <ul style="margin:0px 0px 0px 0px;">
    <div id="div2">
         <li>Absolutely not! Advertising is strictly prohibited and anyone caught 
             advertising will be banned without warning.
        </li>
    </div>
 </ul>

JavaScript コードを次のように変更します。

function showOrHide(id)  
    { 
        var div = document.getElementById(id); 
        if (div.myDivClass.display == "block")  
        { 
            div.myDivClass.display = "none"; 
        } 
        else  
        { 
            div.myDivClass.display = "block"; 
        } 
    }
于 2013-03-03T08:06:27.353 に答える
0

いくつかのこと：

  • document.getElementByClassである必要がありますdocument.getElementsByClassName(Elements は複数形であることに注意してください)
  • document.getElementsByClassName配列を返すため、インデックスを使用してその項目にアクセスする必要があります。これを行うにはいくつかの方法があります。ここにあなたがそれを行うことができる1つの方法があります:

    • var divs = document.getElementsByClassName('showorhide');
for (i = 0; i < divs.length; i++)
{
    //Do your hide/show logic here using divs[i] instead of div
}
  • 表示プロパティを取得/設定するときは、`div.myDivClass.display` を `div[i].style.display` にする必要があります。

それがすべてうまくいくかどうか教えてください:)

于 2013-03-03T08:12:31.170 に答える
0

純粋な JavaScript を使用する場合は onclick を使用する必要がありますが、jquery は次のようになりますis(":visible") , will work much better in this place。

<a onclick="javascript:showOrHide();"><font size="3">Can i advertise in your chatroom? </font></a>
于 2013-03-03T08:03:28.237 に答える
0

これを試して：

function showOrHide()  
{ 
    var div = document.getElementByClassName("showorhide"); 
    if (div.style.visibility == "visible")  
    { 
        div.style.visibility = "hidden"; 
    } 
    else  
    { 
        div.style.visibility = "visible"; 
    } 
}
于 2013-03-03T08:14:00.383 に答える