移动设备上的 Wordpress 下拉菜单没有响应/工作

Question

我希望有人能帮我解决这个问题。我终于开始使用 wordpress 而不是对所有内容进行编码，而且我一直停留在下拉菜单上。该网站 newsby2.com 一切看起来都很棒，我想在我的笔记本电脑上如何使用，菜单在笔记本电脑上不是下拉菜单，但当我转到移动设备时，它看起来应该是一个下拉菜单，但没有响应。 “菜单”一词显示为红色，当我单击它时，它变为白色，但什么也没有下来。我尝试将 Inline 放在某些代码上，但所做的只是立即显示子菜单，而无需我单击它。我想要做的是当我点击单词菜单时出现子菜单。

/*--------------Mobile Menu-------------------*/
#mobile-menu {
display:none;
position:relative;
margin:0 15px;
}
#mobile-menu > span {
display:inline-block;
text-transform:uppercase;
font-family:'Rokkitt', serif;
font-size:24px;
cursor:pointer;
color:#e03d3d;
}
#mobile-menu > span:hover {
color:#fff;

}
#toggle-view-menu {
display:none;
list-style: none;
margin: 0;
padding: 0; 
border-top: none;
position:absolute;
top:33px;
left:0;
z-index:99999;
width:220px;
}
#toggle-view-menu > li {
margin: 0;
position: relative;
cursor: pointer;
list-style: none;
background-color:#e03d3d;
border-top:1px solid #fff;

}
#toggle-view-menu > li:first-child {
border-top:none;
}
#toggle-view-menu h3 {
font-size: 18px;
margin: 0;  
float: left;
line-height: 40px;  
padding: 0 15px;
}
#toggle-view-menu h3 a {
color: #fff;
width:100%;
display:block;
}
#toggle-view-menu li:hover {
background-color: #c72f2f;
}
#toggle-view-menu span {
float: right;
font-size: 26px;
width: 40px;
height: 40px;
text-align: center;
color: #fff;
line-height: 40px;
background-color:#c72f2f;
}
#toggle-view-menu li.active {
background-color:#c72f2f;
}
#toggle-view-menu li.active span,
#toggle-view-menu li.active h3 a {
color:#fff;
}
#toggle-view-menu .menu-panel {
margin: 0px;
display: none;
padding: 10px 15px 0;
font-size: 14px;
color: #fff;
background-color:#c72f2f;
border-top:1px solid #fff;
}
#toggle-view-menu .menu-panel ul {
margin:0;
}
#toggle-view-menu li .menu-panel ul li {
border:none;
list-style:disc inside;
margin: 0 0 10px 0;
color:#fff;
}
#toggle-view-menu .menu-panel ul li a {
display:inline-block;
*display:inline;
zoom:1;
color:#fff;
font-size:12px;
}
#toggle-view-menu .menu-panel ul li ul {
margin-left:40px;
margin-top:10px;
}

#main-content {
padding:25px;
background-color:#fff;
}

/* =========================================================

Answer 1

您需要添加一些 jQuery 来检测点击文本。

jQuery("#mobile-menu > span").click(function() {
    jQuery("#toggle-view-menu").slideToggle(500);
    return false;
});

随意编辑500来控制速度。

有关 slideToggle

的更多信息

Answer 2

CSS 看起来不错，似乎是您的 custom.js 文件中的错误。

移动菜单功能似乎可以正常工作，但被

包裹时就不行了

jQuery(document).ready(function () {});

您可以尝试通过删除代码

来删除文档就绪功能

jQuery(document).ready(function () {" in line 163,
and "}); in line 197

移动设备上的 Wordpress 下拉菜单没有响应/工作

Wordpress Drop Down Menu on Mobile Not Responding / Working

css

iphone

wordpress

mobile

drop-down-menu