Question

我的问题涉及多个DIV display:block或display:none每个都有自己的锚标记。主要问题是我已经重新启动了运行此功能的JS代码而没有完全理解它。我只需要一个方法来通过一个“全部显示/全部隐藏”链接切换所有DIV。我无法绕过它。

我已经完全尝试了我极其有限的把握所允许的一切 - 主要包括在黑暗中摆动我的手臂，并希望我意外地建立一个奇迹。由于这没有奏效，我可耻地寻求帮助。

使这个问题与众不同的唯一因素是具有此特定问题的所有变量 -

可以在www.robertmeans.com/menu.htm

找到一个（几乎）工作示例

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>

我花了无数个小时试图独自完成这项工作。非常感谢任何帮助。

Answer 1

好的，首先，对我来说似乎有太多代码......你可以通过使用jQuery轻松完成这项工作。我在这里做了一个例子：http://jsfiddle.net/Nr2f6/4/

这是一些简单的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。所有样式（显示：无）应单独放置，以免与您尝试的操作发生冲突。所以只需将它放在一个单独的css文件中。然后运行以下代码：

  $("div[id^=item]").click(function(){
   var reference2open = $(this).attr("id");
   //get the data-rel attribute associated
   $("div[data-rel='"+reference2open+"']").slideToggle();
   $("span",this).toggleClass('minus');
});

$("#all").click(function(){
    if($(this).hasClass('close')){
       $("div[data-rel^=item]").slideUp();
       $("div[id^=item] span").removeClass('minus');
       $("#all").removeClass('close');
        $("#all").html('open them all');
    }else{
    //open and close them all by clicking
    $("div[data-rel^=item]").each(function(){
        if($(this).is(':hidden')){
            $(this).slideDown();
            $("div[id^=item] span").addClass('minus');
            $("#all").html('close them all');
        }
    });
    //change the button to close
    $("#all").addClass('close');
    }
    //$("div[id^=item] span").toggleClass('minus');
});

****使用CSS加入TOGGLE PLUS和MINUS SIGNS ****

.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为以（^ =）项开头的div，就运行代码。

$（“div [data-rel ='”+ reference2open +“']”）。slideToggle（）：正在说从被点击的div获取id并找到内容框所在的位置具有相同的名称但在data-rel属性中。向下滑动，如果它已经向下滑动，则向上滑动（切换）。你不必使用幻灯片效果，我只是觉得它更有趣！

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

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

这最后一部分非常简洁，因为你可以创建项目的许多实例 - ？框和此代码适用于任何数量的代码。您也可以将相同的代码添加到不同的div中，例如偶数和奇数，并相应地切换所有偶数和所有奇数元素。

Answer 2

您可以为要切换的所有内容指定一个特定的class，然后使用切换功能遍历所有内容。

JS - 切换所有DIV

2 个答案: