wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?
Falls es hilft hier dier html-code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Language Selection</title>
<style>
/* Dropdown Button */
.dropbtn {
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content */
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
z-index: 1;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin: 8px 0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: transparent;
padding: 15px 13px;
text-decoration: none;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */
}
/* Show the dropdown menu when hovering over the dropdown */
.dropdown:hover .dropdown-content {
display: block;
}
/* Keep the dropdown menu open when hovering over it */
.dropdown:hover .dropbtn {
background-color: transparent;
}
</style>
</head>
<body>
<div class="gtco-loader"></div>
<div id="page">
<nav class="gtco-nav" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>
</div>
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active"><a href="#" data-nav-section="home">Home</a></li>
<li><a href="#" data-nav-section="about">Über uns</a></li>
<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>
<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>
<li><a href="#" data-nav-section="our-team">Unser Team</a></li>
<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>
<li class="dropdown">
<div class="dropdown">
<a href="#" class="dropbtn">Deutsch ∨</a>
<div class="dropdown-content">
<p><a href="italiano.html" class="italiano">Italiano</a></p>
<p><a href="english.html" class="english">English</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script>
// JavaScript to handle dropdown menu clicks
document.addEventListener("DOMContentLoaded", function() {
var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");
var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");
// Function to toggle the dropdown content visibility
function toggleDropdown(index) {
if (dropdownContents[index].classList.contains("show")) {
dropdownContents[index].classList.remove("show");
} else {
dropdownContents[index].classList.add("show");
}
}
// Close dropdown content if clicked outside the dropdown
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
dropdownContents.forEach(function(content) {
content.classList.remove("show");
});
}
});
// Handle dropdown button clicks
dropdownButtons.forEach(function(button, index) {
button.addEventListener("click", function(event) {
event.stopPropagation(); // Prevent the document click event
toggleDropdown(index);
});
});
// Handle dropdown options clicks
var dropdownOptions = document.querySelectorAll(".dropdown-content a");
dropdownOptions.forEach(function(option) {
option.addEventListener("click", function(event) {
// Prevent default action
event.preventDefault();
// Redirect to the selected page
window.location.href = option.getAttribute("href");
});
});
});
</script>
</body>
</html>