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下拉菜单无响应/工作

2 个答案: