移动下拉菜单不会消失 [英] Mobile dropdown menu won't go away

问题描述

我的移动网站有此下拉菜单。问题是，在下拉菜单之外单击时，它不会消失。因此，当单击按钮时，除了从菜单中选择其他站点之一之外，无法再次摆脱该菜单。如果显示出来，是否有可能使它消失，如果您单击它之外呢？

I have this dropdown menu, for my mobile site. The problem is, it will not go away when clicking outside of the dropdown menu. So when clicking the button, there is no way of getting rid of the menu again, besides choosing one of the other sites from the menu. Is it possible, when it shows, to make it go away if you click outside of it?

这是我的代码：

/* Dropdown Button */
.dropbtn {
    background-color: #948a69;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #9e9370;
}

<div style="position:absolute; top:15px; left:15px;">
<div class="dropdown">
  <button class="dropbtn"><b>MENU</b></button>
  <div class="dropdown-content">
    <a href="index.html">Velkommen</a>
    <a href="bock.html">Produkter</a>
    <a href="fadol.html">Fadøl</a>
    <a href="historie.html">Historie</a>
    <a href="kontakt.html">Kontakt </a>
  </div>
</div>
</div>

推荐答案

我只是遇到了同样的问题，并从这里找到了解决方案：

http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

I just had this same issue and found a solution from here:
http://www.cssplay.co.uk/menus/cssplay-ipad-dropdown-menu-fixed.html

此修复程序集中在使用透明图像强制我们想要的浏览器行为上。添加此CSS：

The fix centers around using a transparent image to force the browser behavior we want. Add this CSS:

// For the Safari mobile browser
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div button:hover + img {
  display: block;
}

然后在最后一个之前将其添加到HTML中< / div> ：

<img class="close" src="ipad/trans.gif" />

我个人使用的是列表而不是按钮，因此可能需要进行一些调整。但我可以使用基于基于菜单的列表（< ul> 和< li> ）来确认它是否有效。

I personally am using this with lists rather than buttons, so there might be some tweaking necessary. But I can confirm it works using lists (<ul> and <li> based menu).

这篇关于移动下拉菜单不会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！