Выпадающее меню на чистом CSS без Javascript
Я попробовал и получил следующий фрагмент.
Осталось только щелкнуть где-нибудь еще, чтобы закрыть раскрывающийся список.
Ожидается: раскрывающийся список должен закрываться, когда я выбираю элемент.
Я хочу это:
- Чистый CSS
- Без изменения данного HTML
- Без добавления JavaScript
function toggleClasses(e) { document.querySelector('.selected').className = ''; e.target.className = 'selected'; }button { width: 100%; height: 40px; } .selected { -webkit-appearance: none; } button:not(.selected) { display: none; } .dropdown:focus-within button { display: block; }<div class = "dropdown"> <button onClick = "toggleClasses(event);" class = "selected">link 1</button> <button onClick = "toggleClasses(event);">link 2</button> <button onClick = "toggleClasses(event);">link 3</button> <button onClick = "toggleClasses(event);">link 4</button> </div>
Я запутался, в вашем примере есть Javascript, но вы просите его не использовать?
@ZohirSalak Я не хочу рекламировать больше скриптов и хотел бы добиться этого с помощью чистого CSS. Прилагаемый JS предназначен только для добавления / удаления класса.
добавление простого флажка вверху решит эту проблему.
Этого можно достичь многими другими способами, если я могу изменить HTML / JS, но проблема состоит в том, чтобы изменить, не изменяя HTML / JS. Я все еще пытаюсь этого добиться.
I have to click somewhere else to close the dropdown, кроме щелчка в другом месте, как вы хотите, чтобы это произошло?
@ZohirSalak он должен закрываться при выборе любого пункта.
@ w3debugger Я нашел способ, но вы должны дважды щелкнуть то же значение, а не только одно.
Я не думаю, что это возможно, потому что, когда вы нажимаете другую кнопку, в раскрывающемся списке все еще есть фокус.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
У вас есть искал? Что ты пробовал? Если вам не нужен скрипт, зачем использовать тег js?
document.querySelector('.selected').className = '';может быть лучшеdocument.querySelector('.selected').classList.remove('selected');