将 active class 添加到多级手风琴

Question

我有一个多级手风琴，但只缺少活动的 class，只针对 active/open 面板，没有改变任何其他东西，有什么帮助吗？

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

我对你的 js 做了一些修改。 - https://jsfiddle.net/LordJording/ftr4j0Ly/2/

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

如果您要关闭当前打开的手风琴

，上面的行删除了 class

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

第一行查看所有兄弟并尝试找到一个已经激活的元素并删除 class is-active 第二行然后将 is-active class 添加到您正在切换的当前项目

$('.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 中，如果它具有 class is-active

，您将需要设置切换元素的样式

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

我在您的代码笔演示中注意到您在嵌套手风琴上使用内联样式，您可能希望将其从内联中删除并改用您的链接样式表，因为它可能会导致您的样式出现问题。

Answer 2

请检查此代码。

<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: '[=10=]2B';
 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>

将 active class 添加到多级手风琴

adding active class to multi level accordion

html

javascript

css

jquery

accordion