Question

我有一个多层次手风琴，但只缺少活动类，仅针对活动/打开面板，没有其他任何改变，没有帮助吗？

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>

Answer 2

我对您的js进行了一些更改。 -https://jsfiddle.net/LordJording/ftr4j0Ly/2/

$this.removeClass('is-active');

如果您要关闭当前打开的手风琴，则上面的行删除了该类

$this.parent().parent().find('.is-active').removeClass('is-active');
$this.addClass('is-active');

第一行查看所有同级物，并试图找到一个已经激活的元素，并删除了类is-active 然后，第二行将is-active类添加到要切换的当前项

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

    var $this = $(this);

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

然后在CSS中，如果切换元素具有类is-active

，则需要设置其样式

.toggle.is-active {
    background-color: #ff00ff;
}

我在您的Codepen演示中注意到您正在对嵌套的手风琴使用嵌入式样式，您可能希望将其从嵌入式样式中删除，而改用链接的样式表，因为这可能会导致样式问题。

在多层次手风琴中增加活动课

2 个答案: