Jquery显示子菜单上点击响应网站

Question

我使用的脚本，在我的页面顶部prepends菜单图标为移动版本的响应网站。我将两个水平导航栏（一个在页面顶部，另一个在下面）组合成一个带有子菜单的垂直菜单。那部分工作完美。

我想添加一个功能，但是，这是隐藏子菜单，直到父母被点击 - 这样的初始手机菜单不会这么长。有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脚本中或与我需要的相同文档中，仅适用于移动版v中的子菜单该网站的网站。

我是一个擅长切割粘贴php和js/jquery但不写js/jquery或php的HTML/CSS人物。网站建在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(); 
); 

这不是测试，我敢肯定它不工作:)，但应该把你在正确的道路。