0

我正在使用一个脚本，该脚本在我的页面顶部为响应式网站的移动版本添加一个菜单图标。我将 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/

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

非常感谢帮助！

4

1 回答 1

0

尝试

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

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

于 2013-03-24T04:14:29.430 回答