Question

因此我在尝试创建单击时的下拉菜单时遇到问题。首先，有一个我正在研究的真实网站。 https://socialmanagement.000webhostapp.com/ 宽度小于736px时，菜单将变为一个按钮。问题在于，在移动设备上它确实有问题。如果您在电话上单击它，即使它没有显示，它也会自动将您转到菜单中最后一个按钮的“ href”。另外，再次单击“主页”按钮后，菜单不会消失

我需要下拉菜单，然后单击按钮（该按钮将保持在与当前位置不同的位置），直到用户再次单击它为止。非常感谢您的任何建议

HTML：

<div class="navbar" id="myTopnav" >
    <div class="dropup">
        <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" />  </a>
        <div class="dropup-content" >
            <a href="#home" >   <img src="images/Icons/home.png" /> Home</a>
            <a href="#news">    <img src="images/Icons/about.png" /> News</a>
            <a href="#contact"> <img src="images/Icons/info.png" /> Contact</a>
            <a href="#home">    <img src="images/Icons/menu.png" /> Home</a>
            <a href="#news">    <img src="images/Icons/pic.png" /> Newssssssssssss</a>
            <a href="#contact"> <img src="images/Icons/about.png" /> Contact</a>
       </div>
    </div>
</div>

SCRIPT（我到这里来的第一张纸条很糟糕，因此我不得不将其更改为该纸条，但仍然无法从移动设备关闭它）：

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.icon')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

已编辑

：

首先，在您提供的HTML代码中，没有myDropdown元素。因此，首先我们需要将该 id 添加到dropup-content元素中。然后，我们可以在单击show或您的情况下的图标时切换a的类。因此，这里是：

HTML：

<div class="navbar" id="myTopnav" >
     <div class="dropup">

                    <!-- You don't need javascript void here, we just won't include href.-->
                    <a class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" />  </a>

          <!-- We add id="myDropdown" to the dropup-content element.-->
           <div class="dropup-content" id="myDropdown">
                        <a href="#home" >   <img src="images/Icons/home.png" /> Home</a>
                        <a href="#news">    <img src="images/Icons/about.png" /> News</a>
                        <a href="#contact"> <img src="images/Icons/info.png" /> Contact</a>
                        <a href="#home">    <img src="images/Icons/menu.png" /> Home</a>
                        <a href="#news">    <img src="images/Icons/pic.png" /> Newssssssssssss</a>
                        <a href="#contact"> <img src="images/Icons/about.png" /> Contact</a>
           </div>
     </div>
</div>

脚本：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show")
}
// This is all you need to toggle on/off the menu,
// no need of that extra function with a for loop that you have in your code.

当然，这不用说，您必须以自己喜欢的方式在CSS中编辑show类。

对于另一个问题，如何将菜单保持在同一位置，只需将 position: absolute 添加到CSS中的该元素，并使用 {{1} } 进行协调，并给它一个top/left/right/bottom以确保其位于所有其他元素的顶部。希望这可以解决您的问题。

完整的下拉菜单OnClick

1 个答案: