#javascript #html #css
#javascript #HTML #css
Вопрос:
Я создал выпадающие кнопки, используя javascript для школьного проекта, но задача требует, чтобы все, что связано с javascript, также работало без javascript. Что я могу сделать, чтобы эти кнопки работали как с javascript, так и без него. Я бы предпочел, чтобы они были открыты все время, когда JS отсутствует
РЕДАКТИРОВАТЬ: забыл добавить ContainerReward в css.
Вот код:
HTML:
<div class="ContainerReward">
<div class="dropdown">10km/week</div>
<div class="panel">
<p>K</p>
</div>
<div class="dropdown">20km/week</div>
<div class="panel">
<p>K</p>
</div>
<div class="dropdown">30km/week</div>
<div class="panel">
<p>K</p>
</div>
<div class="dropdown">40km/week</div>
<div class="panel">
<p>K</p>
</div>
<div class="dropdown">50km/week</div>
<div class="panel">
<p>K</p>
</div>
</div>
CSS:
.ContainerReward {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
margin: 10px;
border-radius: 5px;
background-color: transparent;
}
.dropdown {
margin: 2px;
border-radius: 5px;
background-color: #BCEBCB;
color: #000000;
cursor: pointer;
padding: 18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}
.active, .dropdown:hover {
background-color: #93B48B;
}
.panel {
margin: 2px;
border-radius: 5px;
padding: 0 18px;
background-color: #F7FFF6;
display: none;
overflow: hidden;
}
JS:
var acc = document.getElementsByClassName("dropdown");
var i;
for (i = 0; i < acc.length; i ) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
Ответ №1:
Попробуйте этот подход с флажками. Вам нужно изменить свой html примерно таким образом.
<div class="ContainerReward">
<label for="tenkm" class="dropdown">10km/week</label>
<input class="dropdown_input" type="checkbox" id="tenkm" />
<div class="panel">
<p>K</p>
</div>
<label for="twentykm" class="dropdown">20km/week</label>
<input class="dropdown_input" type="checkbox" id="twentykm" />
<div class="panel">
<p>K</p>
</div>
<label for="thirtykm" class="dropdown">30km/week</label>
<input class="dropdown_input" type="checkbox" id="thirtykm" />
<div class="panel">
<p>K</p>
</div>
<label for="fortykm" class="dropdown">40km/week</label>
<input class="dropdown_input" type="checkbox" id="fortykm" />
<div class="panel">
<p>K</p>
</div>
<label for="fiftykm" class="dropdown">50km/week</label>
<input class="dropdown_input" type="checkbox" id="fiftykm" />
<div class="panel">
<p>K</p>
</div>
</div>
и CSS, подобный этому.
.ContainerReward {
display: grid;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
margin: 10px;
border-radius: 5px;
background-color: transparent;
}
.dropdown {
margin: 2px;
border-radius: 5px;
background-color: #BCEBCB;
color: #000000;
cursor: pointer;
padding: 18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}
.active, .dropdown:hover {
background-color: #93B48B;
}
.dropdown_input {
display: none;
}
.dropdown_input:not(:checked) .panel {
margin: 2px;
border-radius: 5px;
padding: 0 18px;
background-color: #F7FFF6;
display: none;
overflow: hidden;
}
Это должно сработать для вашего варианта использования.
Вот ручка к этому примеру
Комментарии:
1. Большое вам спасибо! Но у меня есть небольшая проблема. Когда я использовал этот код и запустил веб-сайт в Chrome, флажки начали появляться под каждой кнопкой после того, как я нажал на них, хотя они не появлялись в codepen.
2. Это должно работать во всех браузерах, пожалуйста, попробуйте обновить вашу вкладку. Если это помогло, пожалуйста, примите ответ.
3. Теперь это сработало. Я сделал что-то не так с кодом на моей стороне. Однако, я забыл упомянуть, что поля панели, которые появляются после нажатия на кнопку, прозрачны, а не белые. Я забыл добавить часть кода в CSS, поэтому я собираюсь обновить этот пост прямо сейчас.
4. Я обновил ответ и перо. Вам нужно добавить display: grid; в . Класс ContainerReward в противном случае все остальные свойства сетки не будут работать с ними.
5. К сожалению, панели по-прежнему прозрачны, хотя я использовал сетку отображения…
Ответ №2:
Не полный ответ, но тот, который укажет вам правильное направление (и, надеюсь, узнает больше по пути)
Вам нужно что-то, что может переключаться между двумя «состояниями» для представления «открытого» и «закрытого» поведения выпадающего списка, что-то, что работает изначально без javascript, похоже, флажок может быть полезен? Вы можете выбрать между «проверено» и «снято», существует псевдокласс css «:checked», который вы могли бы использовать для управления открытыми и закрытыми стилями.
Комментарии:
1. Спасибо за ответ! Я уже пробовал что-то подобное раньше с флажками. Это было на панели навигации с выпадающим списком в мобильном режиме. Проблема в том, что мне нужно было создать меню гамбургера с помощью CSS для кнопки флажка. Я хочу, чтобы вся кнопка выпадающего списка была интерактивной.
2. Это может быть достигнуто с помощью подхода с флажками. Вы можете сделать так, чтобы флажок заполнял его родительский контейнер. Таким образом, весь контейнер будет доступен для просмотра, тем самым активируя флажок.
Ответ №3:
Вы также можете использовать собственные <select> <option> элементы и, которые предназначены именно для этого. Он даже доступен автоматически. JavaScript не требуется.
А, понятно, видимо, я не умею читать. Вы ищете аккордеон, а не выпадающий список. Тогда я предлагаю использовать <details> and <summary> . Они также работают изначально в большинстве современных браузеров.