Javascript 单击下拉菜单

对于我的汉堡包菜单，我正试图建立它，使它成为一个下拉菜单点击。例如，如果按下项目1旁边的加号，则项目1的子项目将下拉。我已将所有项目和子项目添加到汉堡菜单中。但是，我不知道如何使子项仅在按下父项旁边的加号时显示。有人有什么解决办法吗

jsfiddle-

jQuery（文档）.ready（函数（）{
jQuery（“#汉堡导航图标”）。单击（函数（）{
jQuery（this.toggleClass（'open'）；
jQuery（'body'）.css（'overflow'，'hidden'）；
if（jQuery（“#汉堡包菜单封面”）.css（'opacity'）='0'）{
jQuery（“#汉堡菜单封面”）.css（'opacity'，'1'）；
jQuery（“#汉堡菜单封面”）.fadeIn（300.css（'display'，'table'）；
jQuery（'body'）.css（'overflow'，'hidden'）；
}否则{
jQuery（“#汉堡菜单封面”）.css（'opacity'，'0'）；
jQuery（“#汉堡菜单封面”）.fadeOut（300.css（'display'，'none'）；
jQuery（'body'）.css（'overflow'，'visible'）；
}
});
});
/*--------------------------------------------------------------
##汉堡包菜单
--------------------------------------------------------------*/
#汉堡包菜单封面{
z指数：5；
宽度：100%；
身高：100%；
背景：rgba（255，255，255，0.9）；
位置：固定；
字号：1.5em；
文本对齐：居中；
右：0px；
顶部：0px；
不透明度：0；
显示：无；
溢出y：隐藏；
-webkit溢出滚动：触摸；
溢出：隐藏；
}
.汉堡包菜单{
背景：#fff；
宽度：31%；
身高：100%；
右边框：1px实心#808080；
位置：固定；
顶部：0px；
}
.汉堡菜单容器{
左边距：73px；
边缘顶部：100px；
右边填充：32px；
填充底部：40px；
边框底部：1px实心#808080；
}
.汉堡包菜单链接李{
列表样式：无；
字体系列：“freightlight”；
字体大小：36px；
显示：块；
线高：57px；
字体：斜体；
文本转换：大写；
文字装饰：无；
}
.汉堡包菜单{
文字装饰：无；
颜色：#000；
}
.汉堡包菜单链接李a：悬停{
文字装饰：无；
颜色：#000；
}
.汉堡包菜单链接li a:活动{
文字装饰：无；
颜色：#000；
}
汉堡包菜单链接李a：参观了{
文字装饰：无；
颜色：#000；
}
#汉堡导航图标{
z指数：20；
宽度：50px；
高度：35px；
位置：相对位置；
利润率：35px 30px；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
光标：指针；
}
#汉堡包导航图标跨度{
显示：块；
位置：绝对位置；
高度：5px；
宽度：40px；
背景：#000；
不透明度：1；
左：0；
}
/*图标3*/
#汉堡导航图标跨度：第n个孩子（1）{
顶部：0px；
}
#汉堡导航图标跨度：第n个孩子（2），#汉堡导航图标跨度：第n个孩子（3）{
顶部：12px；
}
#汉堡导航图标跨度：第n个孩子（4）{
顶部：24px；
}
#hamburger-nav-icon.open跨度：第n个孩子（1）{
顶部：8px；
宽度：0%；
左：50%；
}
#hamburger-nav-icon.open跨度：第n个孩子（2）{
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#hamburger-nav-icon.open跨度：第n个孩子（3）{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
#hamburger-nav-icon.open跨度：第n个孩子（4）{
顶部：8px；
宽度：0%；
左：50%；
}















试试这个：

HTML

你需要那样的东西吗？
我在图标中添加了一个
open
类，该类触发jquery函数，该函数在子菜单div中消失。
我已将您的
子项
移动到
li>ul
。此外，旧的
子项
现在具有
aria hidden
属性

添加的CSS控制
子项的可见性

.hamburger-menu-links ul[aria-hidden="true"] {
  display: none;
}

.hamburger-menu-links ul[aria-hidden="false"] {
  display: block;
}

添加的JS代码为
ul
子项切换
aria隐藏

$('.hamburger-menu-links li').click(function(e) {
  var ul = $(this).find('ul');

  var ariaHidden = ul.attr('aria-hidden');
  var value = (ariaHidden === 'true') || false;

  ul.attr('aria-hidden', !value);
});

下面是一个工作示例


jQuery（文档）.ready（函数（）{
jQuery（“#汉堡导航图标”）。单击（函数（）{
jQuery（this.toggleClass（'open'）；
jQuery（'body'）.css（'overflow'，'hidden'）；
if（jQuery（“#汉堡包菜单封面”）.css（'opacity'）='0'）{
jQuery（“#汉堡菜单封面”）.css（'opacity'，'1'）；
jQuery（“#汉堡菜单封面”）.fadeIn（300.css（'display'，'table'）；
jQuery（'body'）.css（'overflow'，'hidden'）；
}否则{
jQuery（“#汉堡菜单封面”）.css（'opacity'，'0'）；
jQuery（“#汉堡菜单封面”）.fadeOut（300.css（'display'，'none'）；
jQuery（'body'）.css（'overflow'，'visible'）；
}
});
});
//新的
$（'.hamburger菜单链接li'）。单击（函数（e）{
var ul=$（this.find（'ul'）；
var ariahinded=ul.attr（'aria-hidden'）；
变量值=（ariaHidden=='true'）| | false；
ul.attr（'aria-hidden'，！value）；
});
/*--------------------------------------------------------------
##汉堡包菜单
--------------------------------------------------------------*/
#汉堡包菜单封面{
z指数：5；
宽度：100%；
身高：100%；
背景：rgba（255、255、255
.hamburger-menu-links ul[aria-hidden="true"] {
  display: none;
}

.hamburger-menu-links ul[aria-hidden="false"] {
  display: block;
}

$('.hamburger-menu-links li').click(function(e) {
  var ul = $(this).find('ul');

  var ariaHidden = ul.attr('aria-hidden');
  var value = (ariaHidden === 'true') || false;

  ul.attr('aria-hidden', !value);
});