嵌套的手风琴在父母身上崩溃

Question

我有一个非常简单的手风琴，想要将其他手风琴嵌入其中。然而，当你点击打开其中一个嵌套的那个时，父手风琴会折叠它。这是代码：

＆＃13;

＆＃13;

$(document).ready(function () {
    $('.accordion-title').click(function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').next('.accordion-content').slideUp();
        } else {
            $('.accordion-title').removeClass('active');
            $('.accordion-content').slideUp();
            $(this).addClass('active').next('.accordion-content').slideDown();
        }
    });
});

＆＃13;

	<section class="ac-container">
		<h2>Register for Summer Youth Camps</h2>
		<!-- <div class="ui button-primary fluid ">Learn more about Lunch Pass and Extended Care</div> -->

		<form name="cform" onsubmit="return validateForm()" action="/regcamp.php" method="post">
			<dl class="accordion-title"><div><img src="img/breakfast/american.jpg" alt=""><span>Camper 1 Information</span></div></dl>
			<div class="accordion-content"><p>
				include "camper-1.html"
			</p>
			<dl class="accordion-title"><div><img src="img/breakfast/english.jpg" alt=""><span>Camper 2 Information</span></div></dl>
			<div class="accordion-content"><p>
				include "camper-2.html"
			</p></div>
			
			<dl class="accordion-title"><div><img src="img/breakfast/health.jpg" alt=""><span>Camper 3 Information</span></div></dl>
			<div class="accordion-content"><p>
				include "camper-3.html"
			</p></div>
		</div>

		<dl class="accordion-title"><div><img src="img/breakfast/continental.jpg" alt=""><span>Parent or Guardian</span></div></dl>
		<div class="accordion-content"><p>
			include "parent-guardian.html"
		</p></div>
	</form>

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试

$(document).ready(function () {
    $('.accordion-title').click(function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active').next('.accordion-content').slideUp();
        } else {
            $(this).siblings('.accordion-title').removeClass('active');
            var $ct = $(this).siblings('.accordion-content').slideUp();
            $ct.find('.accordion-title.active').removeClass('active');
            $ct.find('.accordion-content').slideUp();
            $(this).addClass('active').next('.accordion-content').slideDown();
        }
    });
});

演示：Fiddle