Bootstrap Accordion не запускается с правильным значком
Я создал веб-страницу для отображения различных частей политики конфиденциальности. Для отображения информации я использовал Bootstrap и его функцию аккордеона. Он работает нормально и отображает информацию вместе со стандартными значками.
Я хочу начать со значков плюс и минус, чтобы обозначить расширение и схлопывание области.
Моя проблема в том, что при начальной загрузке страницы аккордеон запускается с отображением значков минус.
Если я затем разверну элемент, он правильно отобразит значок свертывания (минус).
Если я сверну его, он отобразит правильный значок плюса.
Я понятия не имею, что происходит, поскольку я не разбираюсь в CSS/HTML. Я прочитал, и то, что показано в CSS, должно работать. Но это не так.
Значки были конвертированы из SVG с помощью этого URL-кодировщика. Видео, которое я использовал для создания CSS, находится здесь.
Вот мой CSS, который должен изменить значки аккордеона.
.accordion {
--bs-accordion-btn-bg: #e5e7eb;
--bs-accordion-active-bg: #e5e7eb;
--bs-accordion-bg: #e5e7eb;
margin-bottom: 0.5rem; /* Set spacing at bottom of accordian item */
}
.accordion-button {
font-size: 2rem;
font-weight: 700;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344c0 13.3 10.7 24 24 24s24-10.7 24-24V280h64c13.3 0 24-10.7 24-24s-10.7-24-24-24H280V168c0-13.3-10.7-24-24-24s-24 10.7-24 24v64H168c-13.3 0-24 10.7-24 24s10.7 24 24 24h64v64z'/%3E%3C/svg%3E");
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232c-13.3 0-24 10.7-24 24s10.7 24 24 24H328c13.3 0 24-10.7 24-24s-10.7-24-24-24H184z'/%3E%3C/svg%3E");
}
Я использую потрясающие значки шрифтов, и они отображаются нормально.
вот моя голова со страницы
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes">
<meta name = "theme-color" content = "#d3ad56" />
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous">
<!-- Css Files -->
<link rel = "stylesheet" href = "./css/bootstrap.min.css">
<link rel = "stylesheet" href = "./css/reset.css?v=0.2">
<link rel = "stylesheet" href = "./css/style.css?v=0.2">
<!-- JS Files -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Bootstrap Icons -->
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<!-- Favicon -->
<link type = "image/png" rel = "icon" href = "./images/logo.png"><link rel = "stylesheet" href = "/ZP5T-c_utgZ7_8Ah"/>
<-- Font Awesome Icons -->
<link rel = "stylesheet" href = "https://kit.fontawesome.com/dab436b83c.css" crossorigin = "anonymous">
</head>
Вот что мне показывают инструменты разработки
Вся помощь очень ценится.
Вот фрагмент HTML-кода, в котором я определяю элемент 10 в Accordian.
<div class = "container">
<div class = "accordion" id = "privacyAccordion10">
<div class = "accordion-item">
<h2 class = "accordion-header" id = "heading-10">
<button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#collapse-10" aria-expanded = "false" aria-controls = "collapse-10">
How long we hold your information
</button>
</h2>
<div id = "collapse-10" class = "accordion-collapse collapse" aria-labelledby = "heading-10" data-bs-parent = "#privacyAccordion10">
<div class = "accordion-body">
<p>We will remove any personal information that will identify you, or we will securely destroy the records when we consider that that personal information is no longer required. This could be a period of seven years after our business relationship with you has ended.</p>
<p>However, we may need to maintain certain records for a longer period, for example, where we are required to hold your personal information for regulatory or legal purposes, to provide you with the services you have requested or to maintain adequate business records.</p>
</div>
</div>
</div>
</div>
</div> <!-- End of 10th Item -->
Можете ли вы показать нам соответствующий HTML? В частности, уверены ли вы, что для кнопки с самого начала установлен класс .collapse?
Я обновил основной вопрос запрошенной вами информацией.
Вы пробовали включить свертывание в класс для кнопки?
У меня не было, но я попробовал это сейчас, и все еще показывает ту же проблему. Я пробовал это в различных комбинациях true, false, 0, 1 .accordion-button {font-size: 2rem; вес шрифта: 700; коллапс: правда; }
Я думаю, вы неправильно поняли, извините, если я не ясно выразился. Свернутый — это не свойство CSS, а класс. И заметьте, он рухнул, а не рухнул. Добавьте его в класс кнопок в HTML, чтобы вместо class = "accordion-button" поместите class = "accordion-button свернуть"
БУМ! У тебя ничего нет. У меня сейчас другая проблема, но основная уже исчезла. Теперь мои элементы со свернутым набором отображаются как открытые. Не беспокоиться. Я это исправлю. Спасибо за вашу помощь и понимание меня. HКак мне сделать ваш ответ ответом?
Давайте продолжим обсуждение в чате.
Я поместил комментарий в ответ, поскольку он решил поставленную проблему. Если у вас есть еще вопрос, лучше задать его отдельно.
Все отсортировано. Другая проблема была с элементом div после элемента кнопки. мне пришлось добавить класс свертывания, чтобы он заканчивался как ``` <div id = "collapse-1" class = "accordion-collapse коллапс" aria-labelledby = "heading-1" data-bs-parent = "#privacyAccordion1"> ```
Ответы 1
Свернутый — это не свойство CSS, а класс.
И заметьте, он рухнул, а не рухнул.
Добавьте его в класс кнопок в HTML, чтобы вместо class = "accordion-button" поместите class = "accordion-button collapsed".
Что вы видите как применяемый класс/CSS, когда проверяете его с помощью инструментов разработчика браузера?