下拉不開放點擊菜單圖標後

我做酒店管理的網站中，我有導航欄中的三個列表項是其中的一個是下拉菜單圖標。問題是，此菜單圖標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>

來源

2016-12-31 Shashwat

Shashwat，

這裏的問題是，當你點擊該圖標，您window.onclick（）函數撤消從點擊的CSS變化。

這裏是很好的案例的演練：

點擊圖標的邊緣。
這會觸發a.dropbtn元素，因此會觸發onclick（）處理程序並添加'show'類。
然後，事件會冒泡到window.onclick處理程序，目標匹配.dropbtn，因此它什麼也不做。

在不好的情況下：

點擊IMG。
事件對該元素沒有做任何事情，所以冒泡到a.dropbtn
a.dropbtn上的onclick處理程序被觸發，show class被添加。
事件冒泡到window.onclick。在這種情況下，目標是img，而不是a.dropbtn，因此！e.target.matches（'。dropbtn'）爲true，並且顯示被刪除。因此，下拉菜單會在添加後儘快刪除。

對此的一個解決方法是將event.e.stopPropagation（）調用添加到您的點擊處理程序。喜歡的東西如下：

window.myFunction =  function myFunction(event) { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
    event.stopPropagation(); 
 
} 
 

 
// 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'); 
 
     } 
 
    } 
 
    } 
 
}

.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; 
 
}

<header> 
 
    <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(event)"> 
 
      <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>

（在一般情況下，它可能是好的，在未來在這裏張貼之前剝離下來的一些示例代碼）

這是否幫助？

來源

2016-12-31 20:09:22 David

是的，它肯定有幫助，非常感謝大衛幫助我用這段代碼。是的，我會確保我未來的帖子只包含代碼的有用部分。再次感謝。 – Shashwat

下拉doesent開上點擊菜單圖標，但是當我點擊了一下，從它打開遠

下拉不開放點擊菜單圖標後

回答

相關問題