使用javascript执行类显示/隐藏文本

JavaScript:

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

css:

html:

聊天问题：

对。您必须年满13岁才能使用我们的聊天室。13岁以下的人将被引导到更适合他们年龄的聊天室


绝对不是！广告是严格禁止的，任何被抓到的广告都将在没有警告的情况下被禁止

---

它曾经有一个div id，它工作得很好，但是我需要使用相同的id和多个show/hide，而不需要更改id和生成大量代码，所以我尝试将它更改为一个类，但我似乎无法让它工作。它隐藏了内容，但在单击时不会显示，有什么建议吗？

你应该使用onclick，因为你想使用纯javascript，但是jquery

是（“：可见”）的，在这里工作会更好。

：

<a onclick="javascript:showOrHide();"><font size="3">Can i advertise in your chatroom? </font></a> 

我可以在你的聊天室做广告吗？

您必须使您的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>

---

现在编辑，以便我更好地理解问题。请注意标记的更改。您会注意到，您需要丢弃由标记中的空格创建的可能的垃圾文本节点，但这应该是可行的。在这种特殊情况下，库将大大减少您需要编写的代码。jQuery是一种非常常见的查询。

两件事：

• document.getElementByClass

  应该是

  document.getElementsByClassName

  （注意元素是复数）

• document.getElementsByClassName

  返回一个数组，因此需要使用索引来访问其项。有很多方法可以做到这一点；这里有一种方法可以做到：

var divs=document.getElementsByClassName（'showorlhide'）；
对于（i=0；i

• `获取/设置display属性时，div.myDivClass.display`应为`div[i].style.display`

让我知道这一切是否可行：）

试试这个：

function showOrHide()  
{ 
    var div = document.getElementByClassName("showorhide"); 
    if (div.style.visibility == "visible")  
    { 
        div.style.visibility = "hidden"; 
    } 
    else  
    { 
        div.style.visibility = "visible"; 
    } 
} 

---

你必须使用show或hide类使你的div唯一，否则，单击其中一个，将显示或隐藏所有div。这只会使它们不隐藏，不允许它们隐藏你的意思？？如果您的showhide类应该在初始渲染时隐藏它们，那么也可以将其放置在id属性旁边的所有div上。新的javascript应该可以执行您想要的操作。作为补充说明，您可以通过删除.showorhide div并将类直接附加到UL来清理标记。这将使标记在语义上更加正确。这样javascript就不会那么复杂了。此外，我建议在问答对周围添加一个div（或者可能是一个LI）。这将在问答对之间创建一个良好的逻辑分隔，并允许您编写更精确的javascript。

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

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

  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";
          }
      }
  }

var divs = document.getElementsByClassName('showorhide');
for (i = 0; i < divs.length; i++)
{
    //Do your hide/show logic here using divs[i] instead of div
}

function showOrHide()  
{ 
    var div = document.getElementByClassName("showorhide"); 
    if (div.style.visibility == "visible")  
    { 
        div.style.visibility = "hidden"; 
    } 
    else  
    { 
        div.style.visibility = "visible"; 
    } 
}