Question

我正在制作持有内容的div，我的问题是如何让所有div崩溃。这里的问题是代码需要是动态的，因为我们不知道将要生成多少div。

首先是我的javascript：

function pageLoad() 

var j = 1; while(j>0)

collapseAll($('div'+j,'divx',+j));
j++;

此部分在加载页面时处理崩溃。所有div都需要折叠。在代码中它应该是这样的：

<a onclick="div('div1');" > //this at first time
 <div id="div1">
 content
</div>    
<a onclick="divx('divx1'); 
<div id="divx1">
 content
</div>
<!-- this at next when div is created -->
<a onclick="div('div2');" > 
<div id="div2">
 content
</div>
<a onclick="divx('divx2'); ">
<div id="divx2">
 content
</div>

依此类推。问题在于，当代码创建新的div时，它为前面部分中使用的div提供相同的名称。

例如：

<a onclick="divx('divx2'); ">
<div id="divx2">
 content
 </div>

//new div created:
<a onclick="divx('divx2'); ">
<div id="divx2">
 content
 </div>

Answer 1

您可以使用以下内容实现此目的。请注意，它需要jQuery（http://jquery.com）。

<script>
$(function() {
    $('a.collapse').click(function() {
        $(this).closest('.collapsible').find('.collapse-container').toggle();
    });

    $('a#collapse-all').click(function() {
        $('.collapse-container').hide();
    });

    // Added: Collapse all on load.
    $('.collapse-container').hide();
});
</script>

<div class="collapsible">
    <a class="collapse" href="#">Click to expand / collapse</a>
    <div class="collapse-container">
        content
    </div>
</div>

<div class="collapsible">
    <a class="collapse" href="#">Click to expand / collapse</a>
    <div class="collapse-container">
        content
    </div>
</div>

<a id="collapse-all" href="#">Click to collapse all</a>

Answer 2

你可以使用Attribute Starts With Selector并通过定位id以div开头的所有div来节省大量的输入：

$('a').click(function(){
   //do something to all the divs, hide them for example
   $('div[id^="div"']).hide();
   //hide only the next div:
   $(this).next('div[id^="div"']).hide()
   //hide all the divs until the nezt <a>
   $(this).nextUntil('a').hide();

});

用javascript隐藏div会全部崩溃

2 个答案: