Question

我的图片会在点击时显示下拉菜单。这是HTML代码：

{ 
  'data': [1,2,3,4]
}

这是整个菜单的CSS：

   <div class="menu">
     <img  id="menu_img" src="https://res.cloudinary.com/dqn5eqmwt/image/upload/v1493014197/Menu_jwzusk.svg">
     <div id="myDropdown" class="dropdown-content">
        <a id="Edprof">Edit Profile</a>
        <a id="Deprof">Delete Profile</a>
        <a id="Chistory">Check History</a>
        <a id="Bevents">Book Events</a>
        <a id="Getout">Logout</a>
     </div>
  </div>

最后，这是图像事件onclick的JS：

.menu {
display: block;
    position: absolute;
    z-index: 2;
    height:55px; /* 150/640 */
    width:55px;/*150/1536*/
    top: 2.5%;
    right: 10.0208333333%;
    float: right;
    cursor: pointer;
 }
#menu_img{
    width:55px;
    height:55px;
    cursor: pointer;
 }

/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
    background-color: #3e8e41;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #7de88a;
    border: 6px solid #7de88a;
    border-radius: 10px;
    width: 300%;
    right: 0px;
    left: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
    cursor: pointer;
 }

/* Links inside the dropdown */
 .dropdown-content a {
    color: #c43396;
    background-color: #fff3bb;
    font-family: Chewy;
    border: 6px solid #7de88a;
    border-radius: 10px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    padding: 12px 16px;
    display: block;
  }

我还有一个JS来隐藏下拉窗口中除了menu_img以外的窗口。这在笔记本电脑和Android手机上运行得非常好。唯一的问题是iPhone。单击时，背景颜色会发生变化，这实际上是悬停操作。但是没有出现下拉菜单。

从我读到的这些是我已经尝试的检查： 1.添加了光标：指向CSS中menu_img的指针 2.删除悬停操作并测试是否会发生单击 3.将onclick（）函数添加到HTML代码中 4.添加触摸以及单击作为JS代码中的事件触发器 5.检查是否双击显示（但只是缩放页面）

这些都不适合我。任何建议/测试/帮助表示赞赏。谢谢！

Answer 1

我编辑了你的代码并在我的服务器上运行它。它适用于所有设备。个人提示：在任何地方使用jQuery或根本不使用它。

$(document).ready(function(){
   $('#menu_img').click(function(){
     $('#myDropdown').show();
   });
});

在iphone上没有发生onclick动作

1 个答案: