javascript - 将事件类添加到多级 Accordion

Question

我有一个多级 Accordion ，但只缺少事件类，只针对事件/打开面板，没有改变任何其他东西，有什么帮助吗？

JS:

$('.toggle').click(function(e) {
e.preventDefault();

var $this = $(this);

if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
} else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);}
});

这是 CodePen:https://codepen.io/mozes22/pen/XxQEBp

Answer 1

请检查此代码。

<style>
	ul 
	{list-style: none;
	padding: 0;}

	ul .inner 
	{padding-left: 1em;
	overflow: hidden;
	display: none;}

	ul .inner.show {
	/*display: block;*/}

	ul li 
	{margin: 0.5em 0;}

	ul li a.toggle 
	{width: 100%;
	display: block;
	background: grey;
	color: #fefefe;
	padding: 0.75em;
	border-radius: 0.15em;
	transition: background 0.3s ease;
	text-decoration: none;}

	ul li a.toggle:after
	{content: '\002B';
	float: right;}

	ul li a.toggle:hover {
	background: yellow;}

	.modal-dialog {
	max-width: 70% !important;
	margin: auto;}
	
	.modal-content 
	{height: 500px;	}
	
	.modal-body 
	{background-color: rgb(3, 119, 184);
	height: 250px;
	overflow-y: scroll;}	
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>


<ul class="accordion">
    <li>
        <a class="toggle" href="javascript:void(0);"><b>- Technical for Sales People</b></a>
        <ul class="inner">test</ul>
    </li>
    <li>
        <a class="toggle" href="javascript:void(0);"><b>- New to Car Sales Foundation</b></a>
        <ul class="inner">test2</ul>
    </li>
</ul>

<script>
$(document).ready(function() { 
$(".inner").hide();
$(".inner:first").show();   
$(".toggle").click(function(){  
if ($(this).is(".show"))
{
$(this).removeClass("show");
$(this).next(".inner").slideUp(400);
}
else
{
$(".inner").slideUp(400);
$(".toggle").removeClass("show");

$(this).addClass("current");
$(this).next(".inner").slideDown(400);
}
});
});
</script>