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

您应该使用 onclick 来使用纯 javascript，但是 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

您必须使您的 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返回一个数组，因此您需要使用索引来访问其项目。有很多方法可以做到这一点；这是您可以做到的一种方法：

    • 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

试试这个：

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 回答