下拉单击菜单图标

Question

下拉单击菜单图标

后不打开

我正在建立一个酒店管理网站，其中我在导航栏中有三个列表项目，其中一个是下拉菜单图标。问题是这个菜单图标在点击它时会打开但是如果我点击它远离它。不知道这背后的错误，一直试图纠正这几个小时。任何一种帮助都会很棒。谢谢。

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>

Answer 1

Shashwat，

这里的问题是当你点击图标时，你的window.onclick（）函数正在撤消该点击的css变化。

以下是好案例的演练：

点击图标的边缘。
这会击中a.dropbtn元素，因此触发onclick（）处理程序并显示＆＃39;类已添加。
然后事件冒泡到window.onclick处理程序，目标匹配.dropbtn，因此它什么都不做。

在坏情况下：

点击img。
事件对该元素没有任何作用，因此冒泡到a.dropbtn
触发a.dropbtn上的onclick处理程序，添加show类。
事件冒泡到window.onclick。在这种情况下，目标是img，而不是a.dropbtn，所以！e.target.matches（＆＃39; .dropbtn＆＃39;）为真，并删除了节目。因此，下拉菜单会在添加后立即删除。

对此的一个修复是向您的点击处理程序添加event.e.stopPropagation（）调用。如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

（一般情况下，在将来发布之前删除部分示例代码可能会很不错）

这有帮助吗？

单击菜单图标时下拉菜单会打开，但是当我点击它远离它时会打开

下拉单击菜单图标

1 个答案: