Question

我已经实现了一个可悬停的下拉菜单，就像w3schools中的示例一样：

https://www.w3schools.com/howto/howto_css_dropdown.asp

在我的PC上，它运行正常，但是我在装有iOS 12.1.2的iPhone上尝试了该页面，并显示了菜单，但是当我触摸菜单以外的内容时，即使它是按钮，它也不会消失打开菜单。它已经在Safari Mobile和Chrome for iOS上进行了测试。

我尝试了此实现，但没有改变：

Mobile dropdown menu won't go away

我的结构是这样的：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
</div>

我已经尝试过这种实现（index.gif = tested.gif）：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
  <img class="close" src="img/index.gif" />
</div>

这是我的CSS：

.mobile__nav-wrapper{
    display: inline-block;
    position: absolute;
    top:1.6em;
    right: 0.2em;
    font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
    font-size: 1rem;    
    border: none;
    outline: none;
    color: #575757;
    padding: 0.50em 0.70em;
    background-color: rgba(244,244,244,0.95);
    font-family: inherit;
    margin: 0;
    border-radius: 3px;

    -webkit-animation-name: mobile__nav__btn-animation;

            animation-name: mobile__nav__btn-animation;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.mobile__nav-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    -webkit-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
            box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
    line-height: 2em;
    font-size: 1.3em;
}
.mobile__nav-content a{
    color: #575757;
    background-color: rgba(255,255,255,0.8);
    text-decoration:none;
    display: block;
    padding-left: 0.5em;
    margin-left: -100vw;
}
.mobile__nav-content a:hover{
    background-color: rgba(163,183,108,0.85);
}
/*--------for the safari mobile browser----------*/
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div .mobile__nav-wraper:hover + img {
  display: block;
}
/*-------end of the safari mobile browser----------*/
.mobile__nav-wrapper:hover .mobile__nav-content{
    display: block;
}

在不使用JS的情况下如何实现呢？还是绝对有必要？

-----更新---- 按照Viira的要求，这是一个JSFiddle：

https://jsfiddle.net/9ymj80hw/1/

CSS悬浮式下拉菜单在移动设备上无法关闭

0 个答案: