Javascript JS-切换所有div

我的问题涉及多个div

display:block

或

display:none

，每个div都有自己的锚定标记。主要的问题是，我在没有完全理解的情况下重新编译了运行此功能的JS代码。我所需要的只是一种通过一个“全部显示/全部隐藏”链接切换所有div的方法。我不能把我的头绕在它周围

我已经尝试了我异常有限的把握所能允许的一切——主要是在黑暗中摆动手臂，希望我意外地创造奇迹。既然这不起作用，我就无耻地寻求帮助

唯一使这个问题独特的是这个特定问题的所有变量-

可以在以下位置找到一个（几乎）有效的示例：

JS代码：

imageX01='plus';
imageX02='plusEven';

function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}

function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}

HTML

<div id="task_item01">
    <a href="javascript:toggleOdd('01')" id="divHref01"><img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" /></a>
    <a href="javascript:toggleOdd('01')">Div #1</a>
</div>

<div style="display:none;" id="div01">
    Content 1
</div>

<!-- ********************************  Item 1 End  **************************** -->
<!-- ********************************  Item 2 Start  ************************** -->

<div id="task_item02">
    <a href="javascript:toggleEven('02')" id="divHref02"><img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" /></a>
    <a href="javascript:toggleEven('02')">Div #2</a>
</div>

<div style="display:none;" id="div02">
    Content 2
</div> 

内容1
内容2

---

我花了无数个小时试图自己解决这个问题。非常感谢您的帮助。

好的，首先，我觉得代码太多了。。。通过使用jQuery，您可以很容易地做到这一点。我在这里举了一个例子：

以下是一些简单的html，可帮助您更好地了解正在执行的操作：

<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
    I have superb items in this div... the world is about to understand just how awesome I am!
</div>

<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
    I have amazing contents in this div. I want to show them to the world!
</div>

****使用CSS在切换中添加加号和减号****

.plus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}
.minus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}

不要忘记包含jQuery文件！希望这有帮助：）

只是想添加一些细节以便更好地理解：

div[id^=item]：表示每当单击id以（^=）item开头的div时，运行代码

$（“div[data rel=”“+reference2open+”））。slideToggle（）：表示从单击的div中获取id，并查找具有相同名称但位于data rel属性中的内容框。将其向下滑动，如果已向下滑动，则将其向上滑动（切换）。你不必使用幻灯片效果，我只是觉得它更有趣

最后但并非最不重要的一点是，您正在寻找的功能：如何一次将它们全部打开。我们再次使用（^=）查找所有div

$（“div[data rel^=item”）.slideToggle（）；：我们在这里对jQuery说，嘿，切换所有具有以（^=）item开头的data rel属性的框

---

最后一部分非常简洁，因为您可以创建多个item-？Box实例，并且此代码适用于任意数量的item-？Box。您还可以将相同的代码添加到不同的div中，如偶数和奇数，并相应地切换所有偶数和所有奇数元素。

您可以为所创建的所有内容指定特定的

类nt切换，然后使用切换函数循环所有这些选项。
我已更改了上面的响应。我认为实现这一点最简单、最快速的方法是使用jquery。您可以使用上面的代码，并将您当前拥有的内容放入div中。您可以添加任意数量的内容，并且仍然有效。：）我明白您现在所说的内联css是什么意思了-我在DIV标签中有display:none。我试图保留示例中的+和-image功能（请参阅OP中的链接）。你看，编辑就在上面。我希望这能帮助你！我遇到过这样的困境，你只想把头撞到墙上。请查看JSFIDLE更新以查看功能。如果这对你有用，请在问题旁边添加一个复选标记！这有助于其他人知道该做什么。谢谢！你是一个向导吗？太棒了，我喜欢这个幻灯片oggle（）效果。最后一个细节-如果我有一个打开和一个关闭，然后单击“全部打开”，它只会反转它们所处的任何状态，而不是强制它们全部打开或全部关闭。-谢谢！完美..我编辑了上面的代码：$（$div[data rel^=item”）.hide（）；只需添加此项，以确保在切换所有div之前隐藏所有div。希望这能为您做到；）
.plus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}
.minus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}