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

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

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

1 个答案: