javascript - 用javascript隐藏div全部折叠

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

您可以使用 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();

});