Задать вопрос
@Yury_Khanzhin
Верстка
javascript

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

Доброго дня всем. Запутался с контекстом. Задача: Есть список раскрывающийся, при нажатии на заголовок разворачивается и добавляется класс. При нажатии на предыдущий и следующий элемент разворачивался только, тот на который кликнули, а остальные сворачивались. Не понимаю, как заставить убирать класс у заголовков всех, кроме того на который нажали. Пока сворачивание/разворачивание по заголовку на который нажали через смену класса (toogleClass)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Document</title>
    <style>
        body {
            background-color: #f5f7fc;
            color: #0E3276;
        }
        .price_block {
            width: 80%;
            position: relative;
            margin: 0 auto;
            padding: 0 40px 28px;
        }
        .price_title {
            padding-bottom: 30px;
            border-bottom: 1px solid #BBC8DE;
            cursor: pointer;
        }
        .price_title:after {
            content: url(assets/template/images/icons/corner.svg);
            position: absolute;
            right: 60px;
            transition: all .4s;
        }
        .price_title.plus:after {
            transform: translateY(6px) rotate(180deg);
            transition: all .4s;
        }
        .price_content .row {
            align-items: center;
            justify-content: center;
            margin-right: 0;
            margin-left: 0;
        }
        .price_content .row:last-child {
            border-bottom: 1px solid #BBC8DE;
        }
        .price_content .row .col-lg-4 {
            text-align: right;
        }
        .price_content .row .col-lg-8,
        .price_content .row .col-lg-4 {
            padding: 15px 30px;
        }

        .price_content .row:nth-child(2n) .col-lg-8,
        .price_content .row:nth-child(2n) .col-lg-4  {
            background-color: #BBC8DE;
        }
    </style>
</head>
<body>
    <div style="height:50px;"></div>
    <div class="price_block">
        <div class="price_title">Заголовок 2</div>
        <div class="price_content" style="display: none;">
            <div class="row">
                <div class="col-lg-8">Описание 1</div>
                <div class="col-lg-4">1</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 2</div>
                <div class="col-lg-4">2</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Оисание 3</div>
                <div class="col-lg-4">3</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 4</div>
                <div class="col-lg-4">4</div>
            </div>
        </div>
    </div>
    <div class="price_block">
        <div class="price_title">Заголовок 2</div>
        <div class="price_content" style="display: none;">
            <div class="row">
                <div class="col-lg-8">Описание 1</div>
                <div class="col-lg-4">1</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 2</div>
                <div class="col-lg-4">2</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Оисание 3</div>
                <div class="col-lg-4">3</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 4</div>
                <div class="col-lg-4">4</div>
            </div>
        </div>
    </div>
    <div class="price_block">
        <div class="price_title">Заголовок 2</div>
        <div class="price_content" style="display: none;">
            <div class="row">
                <div class="col-lg-8">Описание 1</div>
                <div class="col-lg-4">1</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 2</div>
                <div class="col-lg-4">2</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Оисание 3</div>
                <div class="col-lg-4">3</div>
            </div>
            <div class="row">
                <div class="col-lg-8">Описание 4</div>
                <div class="col-lg-4">4</div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $(".price_content").slideUp();
            $(".price_title").click(function(){
                $(this).next(".price_content").slideToggle("slow");
                $(".price_content").not($(this).next(".price_content")).slideUp();
                $(this).toggleClass('plus');
            });
        });
    </script>
</body>
</html>
  • Вопрос задан
  • 58 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Mausglov
@Mausglov
из того, что я видел, обычно не заморачиваются и делают "в лоб":
$(document).ready(function(){
    $(".price_content").slideUp();
    let $titleList = $(".price_title");
    $titleList.click(function(){
        $(this).next(".price_content").slideToggle("slow");
        $(".price_content").not($(this).next(".price_content")).slideUp();
        $titleList.removeClass('plus');
        $(this).addClass('plus');
    });
});
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (back-end / full-stack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Выход на Kickstarter
06 мая 2024, в 16:06
100000 руб./за проект
Перерисовать проект в Figma
06 мая 2024, в 15:53
2500 руб./за проект
Разработка маркетинговой стратегии
06 мая 2024, в 15:52
30000 руб./за проект
Ещё заказы