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(); 
); 

這不是測試，我敢肯定它不工作:)，但應該把你在正確的道路。