Dismiss dropdown if clicked when open

This commit is contained in:
FrederikBaerentsen 2024-11-20 22:10:57 +01:00
parent 54b1a1a9c9
commit f33690b79c

View File

@ -285,9 +285,9 @@
{% for file in files %} {% for file in files %}
{% if ns.found is sameas false and file.startswith(i[0]) %} {% if ns.found is sameas false and file.startswith(i[0]) %}
<div class="card-footer-item dropdown" style="width:100%"> <div class="card-footer-item dropdown" style="width:100%;">
<div class="dropdown-trigger"> <div class="dropdown-trigger" style="width:100%;">
<button class="is-size-6" aria-haspopup="true" aria-controls="dropdown-menu3"> <button class="is-size-6" style="display: flex;width: 100%;justify-content: space-between;" aria-haspopup="true" aria-controls="dropdown-menu3">
<span >Instructions</span> <span >Instructions</span>
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
@ -819,11 +819,13 @@ $(".navbar-item").click(function() {
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)'); const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) { if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click. // For each dropdown, add event handler to open/close on click.
dropdowns.forEach(function(el) { dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) { el.addEventListener('click', function(e) {
closeDropdowns(); // Prevent click from propagating to document
e.stopPropagation(); e.stopPropagation();
// Toggle the 'is-active' class, which will open or close the dropdown
el.classList.toggle('is-active'); el.classList.toggle('is-active');
}); });
}); });
@ -851,7 +853,6 @@ document.addEventListener('keydown', function (event) {
} }
}); });
</script> </script>
</body> </body>
</html> </html>