移动设备上的 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