0
下拉不開放點擊菜單圖標後
我做酒店管理的網站中,我有導航欄中的三個列表項是其中的一個是下拉菜單圖標。問題是,此菜單圖標doesent點擊它時打開,但它確實如果我點擊它離它很遠。不知道什麼是這背後的錯誤,有一直試圖糾正這個小時now.Any幫助將是偉大的。謝謝。下拉doesent開上點擊菜單圖標,但是當我點擊了一下,從它打開遠
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 3000);
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.slider img {
width: 60%;
height: 24%;
margin-left: 20%;
margin-top: 1%;
}
.slider {
background-color: black;
}
ul li img {
max-height: 40px;
}
.login_pic {
height: 20px;
}
.wrapper {
list-style-type: none;
max-width: 1600px;
margin-left: 20%;
}
li {
float: left;
}
li a {
display: inline-block;
color: black;
text-decoration: none;
width: 40px;
padding: 0 2%;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
background-color: green;
position: absolute;
min-width: 160px;
float: none;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
float: none;
}
.dropdown-content a:hover {
background-color: black;
padding-right: 40px;
}
.show {
display: block;
}
.dropbtn img {
margin-top: 12px;
margin-left: 7px;
max-height: 30px;
max-width: 30px;
background-color: none;
border: none;
cursor: pointer;
background-color: none;
}
.login_pic {
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hotel Paradise</title>
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="Stylesheet" href="main.css">
<link rel="Stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<body>
<header>
<a href="index.php" id="logo">
<h1>Hotel Paradise</h1>
<h5>Banquet|Restaurant|Lounge|Stay</h5>
</a>
<div class="wrapper">
<nav>
<ul>
<li>
<a href="index.php">
<img src="images/home_symbol.png" title="Home" />
</a>
</li>
<li>
<a href="login_register.php">
<img src="images/login_symbol.png" class="login_pic" title="Login" />
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">
<img src="images/drop_down.png" />
</a>
<div class="dropdown-content" id="myDropdown">
<a href="stay.php">Reservation</a>
<a href="feedback.php">Feedback</a>
<a href="about.php">Contact Us</a>
</div>
</li>
</ul>
</nav>
<div>
</header>
<div id="main">
<p>"Welcome".</p>
</div>
<div class="slider">
<img class="mySlides" src="images/homepage.jpg">
<img class="mySlides" src="images/homepage_2.jpg">
</div>
</body>
</html>
是的,它肯定有幫助,非常感謝大衛幫助我用這段代碼。是的,我會確保我未來的帖子只包含代碼的有用部分。再次感謝。 – Shashwat