Jquery在点击响应式站点时显示子菜单

Question

我正在使用一个脚本，该脚本会在我的页面顶部为响应式网站的移动版本添加一个菜单图标。我将 2 个水平导航栏（一个在页面顶部，一个在页面下方）组合成一个带有子菜单的垂直菜单。那部分工作得很好。

不过，我想再添加一项功能，即在单击父级之前隐藏子菜单 - 这样初始移动菜单就不会那么长。 10 个顶级链接中有 3 个具有子菜单。这三个本身就是实时链接，而不是占位符。所以我需要打开子菜单并让父母和孩子都可以点击。

这是在移动版网站中单击时显示整个菜单的 jquery：

jQuery(document).ready(function($){
/* prepend menu icon */
$('#topwrap').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#topnav,#mainnav").slideToggle();
$(this).toggleClass("active");

});
});

这是移动版菜单的 CSS：

#menu-icon {
display: block;
float: right;
width: 65px;height: 62px;
margin: 10px 0 0 20px;
background-image: url(images/menuicon.png);
background-repeat: no-repeat; background-position: right top;
}
#topnav {display:none;
z-index: 50; 
position: absolute; 
top:110px; 
right:30px;
background-color: #fff5b9;width: 70%; height: auto;
margin: 0 auto 10px auto;
padding: 10px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border-top: 2px solid #8e9360;
border-right: 2px solid #8e9360;
border-left: 2px solid #8e9360;
 text-decoration: none; 
 }
#topnav li {
margin: 0 0 0 -10px;
padding-bottom: 15px;
list-style: none;
}

#mainnav {
display: none;
z-index: 50;
position: absolute; 
top:320px; 
right:30px;
background-color: #fff5b9;width: 70%; margin: -10px auto 10px auto;
padding: 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border-right: 2px solid #8e9360;
border-left: 2px solid #8e9360;
border-bottom: 2px solid #8e9360;
text-decoration: none;
}
#mainnav li {margin: 0 0 0 -10px;
padding: 10px 0;
list-style: none;
}
#mainnav ul ul {
margin-bottom: 0;
}

#topnav a, #mainnav a {text-decoration: none;
font: 600 14px/14px 'Open Sans', sans-serif;
color: #1e320d;}

html是标准嵌套的ul,li,ul,li

我想将脚本包含在 mobilemenu.js 脚本或同一文档中，因为我需要它仅适用于网站移动版本中的子菜单。

我是一个 HTML/CSS 人，擅长剪切粘贴 php 和 js/jquery，但不会编写 js/jquery 或 php。网站是用 WordPress 构建的，我仍在设计和调整主题，还没有内容，但你可以在

上看到它

http://64.17.148.68/

露营、小屋和河流旅行的子菜单

帮助不胜感激！

Answer 1

试试

// first hide all submenus
$(".sub-menu").hide();

// add click handler to links you know have a submenu
$("a:contains('Camping'), a:contains('Cabins'), a:contains('River Trips')").click(
    // find next submenu and show/hide it
    $(this).parent("li").next(".sub-menu").slideToggle();
);

它没有经过测试，我很确定它不起作用:)，但应该让你走上正确的道路。