Множественный раскрывающийся список с флажком CSS
Все, что я пытаюсь сделать, это переключить класс «toggle-content», когда метка выбрана. На данный момент со следующим CSS ничего не происходит. Я не могу использовать JQuery или какой-либо JavaScript. Я не могу понять, что я сделал не так. Любые идеи очень ценятся.
/* The checkbox */
.hidden-checkbox {
display: block;
}
/* The element to show/hide */
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: dimgrey;
color: white;
border: black;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 3px;
}
/* The label that controls the element */
.label-toggle {
cursor: pointer;
}
/* Show the element when the checkbox is checked */
.hidden-checkbox:checked + .toggle-content {
display: block;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 100px;
padding-right: 10px
}
li {
padding-top: calc(var(--bs-gutter-y)* -1);
padding-right: calc(var(--bs-gutter-x)* -.5);
padding-left: calc(var(--bs-gutter-x)* -.5);
font-size: small;
}
li:hover {
background-color: darkgrey;
}<div>
<label for = "toggleVendors" class = "label-toggle form-control">
click here
</label>
<div type = "checkbox" id = "toggleVendors" class = "hidden-checkbox" />
<div class = "toggle-content">
<ul>
<li><input type = "checkbox" id = "1" />one</li>
<li><input type = "checkbox" id = "2" />two</li>
<li><input type = "checkbox" id = "3" />three</li>
</ul>
</div>
</div>Короче говоря, чтобы этот код работал, вам нужно сделать этот div элементом input и изменить правило .hidden-checkbox css с помощью display: none. Наверняка здесь много вопросов и ответов по этому поводу, но я не нашел ни одного.
если я сделаю div входом, мне придется установить флажок специально для переключения содержимого. щелчок в любом месте метки не имеет никакого эффекта.
нет... потому что у вас есть ярлык с for, нацеленный на флажок. Дело в том, что из соображений доступности щелчок по метке фактически переключит соответствующий флажок и заставит условия правил CSS работать соответствующим образом. Я сказал вам одним комментарием выше точное решение, и ваш комментарий показывает, что вы даже не пробовали его.
Ответы 2
Divs — это не входные данные, которых у них не может быть type: checkbox.
Обменяю на нормальный input
/* The checkbox */
.hidden-checkbox {
display: none;
}
/* The element to show/hide */
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: dimgrey;
color: white;
border: black;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 3px;
}
/* The label that controls the element */
.label-toggle {
cursor: pointer;
}
/* Show the element when the checkbox is checked */
.hidden-checkbox:checked+.toggle-content {
display: block;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 100px;
padding-right: 10px
}
li {
padding-top: calc(var(--bs-gutter-y)* -1);
padding-right: calc(var(--bs-gutter-x)* -.5);
padding-left: calc(var(--bs-gutter-x)* -.5);
font-size: small;
}
li:hover {
background-color: darkgrey;
}<div>
<label for = "toggleVendors" class = "label-toggle form-control">
click here
</label>
<input type = "checkbox" id = "toggleVendors" class = "hidden-checkbox">
<div class = "toggle-content">
<ul>
<li><input type = "checkbox" id = "1" />one</li>
<li><input type = "checkbox" id = "2" />two</li>
<li><input type = "checkbox" id = "3" />three</li>
</ul>
</div>
</div>Вы должны использовать реальный флажок, а не div. Чтобы объединить флажок с меткой, используйте соответствующий идентификатор флажка, чтобы вы могли щелкнуть текст, чтобы переключить флажок.
/* The checkbox */
.hidden-checkbox {
display: none;
}
/* The element to show/hide */
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: dimgrey;
color: white;
border: black;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 3px;
}
/* The label that controls the element */
.label-toggle {
cursor: pointer;
}
/* Show the element when the checkbox is checked */
.hidden-checkbox:checked+.toggle-content {
display: block;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 100px;
padding-right: 10px
}
li {
padding-top: calc(var(--bs-gutter-y)* -1);
padding-right: calc(var(--bs-gutter-x)* -.5);
padding-left: calc(var(--bs-gutter-x)* -.5);
font-size: small;
}
li:hover {
background-color: darkgrey;
}<div>
<label for = "toggleVendors" class = "label-toggle form-control">
click here
</label>
<input type = "checkbox" id = "toggleVendors" class = "hidden-checkbox">
<div class = "toggle-content">
<ul>
<li><input type = "checkbox" id = "1" />one</li>
<li><input type = "checkbox" id = "2" />two</li>
<li><input type = "checkbox" id = "3" />three</li>
</ul>
</div>
</div>Однако я не хочу, чтобы флажок показывался. Я хочу, чтобы пользователю нужно было только нажать на метку. Если у меня есть вышеперечисленное
вы можете добиться этого с помощью CSS, вы изначально указали отображение скрытого CSS с помощью блока. Сейчас я установил для него значение «Нет», чтобы оно было скрыто.
интересно, я буквально вырезал и вставил, но у меня не работает, когда я меняю исходный css для флажка на none
Что за фигня. Это элемент управления, который будет частью главной страницы. У меня это не сработало, потому что на главной странице были другие элементы управления CSS с теми же именами классов, которые имели приоритет над этим элементом, который имел то же имя класса для элемента. Я убедился, что они уникальны, и теперь это работает.
извини, только сейчас увидел твои комментарии. Рад, что вы смогли решить свои проблемы. но в таком случае всегда проверяйте с помощью инструментов разработчика браузера, что применен правильный CSS. Это также сэкономило мне время от поиска не на том конце :)
Divs — это не входные данные, которых у них не может быть
type: checkbox.