javascript - JS - 切换所有 DIV

Question

我的问题涉及多个 display:block 或 display:none 的 DIV，每个 DIV 都有自己的 anchor 标记。主要问题是我在没有完全理解它的情况下重新调试了运行此功能的 JS 代码。我所需要的只是一种通过单个“全部显示/隐藏全部”链接来切换所有 DIV 的方法。我无法全神贯注。

我已经尝试了我异常有限的掌握所允许的一切——主要包括在黑暗中摆动我的 ARM ，并希望我不小心创造了一个奇迹。由于这没有用，我很可耻地寻求帮助。

唯一让这个问题独一无二的是所有与这个特定问题相关的变量 -

可以在以下位置找到一个(几乎)有效的示例: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 添加了切换加号和减号****

.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]:表示每当点击一个 div，其 id 以 (^=) item 开头时，运行代码。

$("div[data-rel='"+reference2open+"']").slideToggle():意思是从被点击的 div 中获取 id 并找到内容框具有相同的名称，但在 data-rel 属性中。将其向下滑动，如果它已经向下，则将其向上滑动(切换)。您不必使用幻灯片效果，我只是觉得它更有趣!

最后但同样重要的是，您正在寻找的功能:如何一次打开它们。我们再次使用 (^=) 来查找所有的 div。

$("div[data-rel^=item").slideToggle();:所以在这里我们对 jQuery 说，嘿切换所有具有 data-rel 属性的框以 (^=) 元素开头。

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