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

Multilevel/Nested expand collapse for dynamic id

本文关键字：折叠 嵌套 id 多级 动态      更新时间：2023-09-26

我有一个包含月份的年份列表，我试图将年份显示为顶级，将月份显示为嵌套级别，其中每个月都包含记录数。生成的 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>

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

你可以这样使用，

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

切换在单击的按钮元素之后的div 元素。

演示

相关文章：