добавление активного класса к многоуровневому аккордеону - PullRequest
Новая
       8

добавление активного класса к многоуровневому аккордеону

0 голосов
/ 29 октября 2018

У меня многоуровневый аккордеон, но пропущен только активный класс, только для активной / открытой панели, без каких-либо изменений, какая-либо помощь?

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);}
});

вот кодовая ручка: https://codepen.io/mozes22/pen/XxQEBp

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Пожалуйста, проверьте этот код. 

<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>
0 голосов
/ 29 октября 2018

Я сделал пару изменений в вашем 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 вы используете встроенный стиль для вложенного аккордеона, вы можете захотеть удалить его из встроенного и вместо этого использовать связанную таблицу стилей, так как это может вызвать проблемы с вашим стилем.

...