多级/嵌套展开动态ID的折叠

时间:2014-11-24 06:22:52

标签: javascript jquery

我有一个包含月份的年份列表,我试图将年份显示为最高级别,将月份显示为嵌套级别,其中每个月包含多个记录。生成的ID将是动态的。任何帮助,将不胜感激。



$(document).ready(function(){
	$('input[id^="button"]').click(function(){
        if($(this).val()=="+" ? $(this).val("-"):$(this).val("+"));
		$("#expanderContent").slideToggle();
        	$('input[id^="but"]').click(function(){
        if($(this).val()=="+" ? $(this).val("-"):$(this).val("+"));
            $('div[id^="level"]').slideToggle();
		
	});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<input id="button0" type="button" value="+">year
<div id="expanderContent" style="display:none">
    <input id="but1" type="button" value="+">content1<br />
        <div id="level1">l1<br/>
            l1<br/>
            l1<br/>
         </div>
	<input id="but2" type="button" value="+">content2<br />
        <div id="level2">l1<br/>
            l1<br/>
            l1<br/>
        </div>   
	content3<br />
	content4<br />
	content5<br />
</div>
&#13;
&#13;
&#13;

    content3<br />
    content4<br />
    content5<br />
</div>

1 个答案:

答案 0 :(得分:0)

你可以这样使用,

 $('input[id^="but"]').click(function() {
     if ($(this).val() == "+" ? $(this).val("-") : $(this).val("+"));
     $(this).nextAll("div:first").slideToggle();
 });

切换单击按钮元素后接下来的div元素。

Demo