Question

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和多个show / hides而不更改id并制作大量的代码，所以我尝试将它转换为类，但我似乎无法让它工作。它隐藏了内容，但点击时不会提起它，任何建议人员？

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

Answer 2

你应该使用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>

Answer 3

你必须让你的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"; 
        } 
    }

Answer 4

情侣：

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`

让我知道这一切是否有效/有意义：）

Answer 5

试试这个：

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

使用javascript做一个类显示/隐藏文本

5 个答案: