Помогите, пожалуйста, написать js или jquery код. для того, чтобы при нажатии на стрелку блок закрывался/открывался

Рейтинг: 0Ответов: 1Опубликовано: 23.03.2023

введите сюда описание изображения

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 16px;
    font-family: Arial;
    line-height: 1.5;
    font-weight: 400;
    height: 100%;
    overflow-wrap: break-word;
}
.table-of-contents {
    background: #f2f5f9;
    margin-bottom: 30px;
    line-height: 1.7;
}
.table-of-contents__header {
    padding: 15px 30px;
    font-weight: 700;
    font-size: 1.1em;
}
.table-of-contents__hide {
    cursor: pointer;
}
.table-of-contents.open .table-of-contents__hide:after {
    content: "︿";
    line-height: 1;

}
.table-of-contents__hide:after {
    content: "﹀";
    margin-left: 12px;
    line-height: 1;
}
.table-of-contents.open .table-of-contents__list {
    display: block;

}
.table-of-contents ol {
    margin: 0 30px 0;
    padding: 0 0 15px 0;
    list-style: none;
}
.table-of-contents ol .level-1 {
    margin-top: 0.4em;
    margin-bottom: 0.2em;
}
.table-of-contents ol li {
    padding-left: 0;
}
<!DOCTYPE html>
<html lang="ru">
<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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Raleway:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
    <link href="style5.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class = "table-of-contents open">
        <div class ="table-of-contents__header">
            <span class = "table-of-contents__hide js-table-of-contents-hide">
                Содержание
            </span>
        </div>
        <ol class ="table-of-contents__list js-table-of-contents-list" style>
            <li class="level-1">
                <a href="#xronologya-razvitia-system">Хронология развития системы</a>
            </li>

            <li class="level-1">
                <a href="#">Разработка приложений в HarmonyOS</a>
            </li>
        </ol>
    </div>
</body>
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
<script src ="java.js"></script>
</html>

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Мы можем повесить слушатель на body, и воспользоваться делегированием. Учтите, что я добавил одно "правило" в css.

document.body.addEventListener("click", ({target}) =>
{
  // Проверяем, что элемент на котором произошел клик имеет класс table-of-contents__hide
  if (target.classList.contains("table-of-contents__hide") === false)
  {
    return;
  }
  
  // Находим ближайщий элемент с классом table-of-contents
  const container = target.closest(".table-of-contents");
  
  if (container !== null)
  {
    // Если нашли, то переключаем у него класс open
    container.classList.toggle("open");
  }
});
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 16px;
    font-family: Arial;
    line-height: 1.5;
    font-weight: 400;
    height: 100%;
    overflow-wrap: break-word;
}
.table-of-contents {
    background: #f2f5f9;
    margin-bottom: 30px;
    line-height: 1.7;
}
.table-of-contents__header {
    padding: 15px 30px;
    font-weight: 700;
    font-size: 1.1em;
}
.table-of-contents__hide {
    cursor: pointer;
}
.table-of-contents.open .table-of-contents__hide:after {
    content: "︿";
    line-height: 1;

}
.table-of-contents__hide:after {
    content: "﹀";
    margin-left: 12px;
    line-height: 1;
}

/* Added */
.table-of-contents__list {
  display: none;
}
/* Added */

.table-of-contents.open .table-of-contents__list {
    display: block;
}
.table-of-contents ol {
    margin: 0 30px 0;
    padding: 0 0 15px 0;
    list-style: none;
}
.table-of-contents ol .level-1 {
    margin-top: 0.4em;
    margin-bottom: 0.2em;
}
.table-of-contents ol li {
    padding-left: 0;
}
<!DOCTYPE html>
<html lang="ru">
<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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Raleway:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
    <link href="style5.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class = "table-of-contents">
        <div class ="table-of-contents__header">
            <span class = "table-of-contents__hide js-table-of-contents-hide">
                Содержание
            </span>
        </div>
        <ol class ="table-of-contents__list js-table-of-contents-list" style>
            <li class="level-1">
                <a href="#xronologya-razvitia-system">Хронология развития системы</a>
            </li>

            <li class="level-1">
                <a href="#">Разработка приложений в HarmonyOS</a>
            </li>
        </ol>
    </div>
</body>
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
<script src ="java.js"></script>
</html>