Javascript 为什么元素不显示onClick？

我正试图找出我选错了什么。我正在尝试单击元素1并显示子元素

函数main（）{
$（'.option按钮'）.hide（）；
$（'.nav按钮'）。在（'click'，function（）上{
$（'option-button'）.next（）.toggle（）；
});
}
$（文件）.ready（主）
.container{
溢出：自动；
身高：100%；
宽度：100%；
边框样式：双边框；
背景色：#1E15；
}
.标题{
字体系列：“副翼”；
字号：125px；
文本对齐：居中；
宽度：自动；
}
h4{
保证金：自动；
颜色：蓝色；
}
.导航栏{
宽度：75.5%；
边框样式：双边框；
保证金：自动；
填充：0；
}
.导航按钮{
列表样式类型：无；
溢出：隐藏；
背景色：白色；
}
.选项按钮{
列表样式类型：无；
溢出：隐藏；
背景色：白色；
}
李{
浮动：左；
显示：块；
字体系列：monospace；
文本对齐：居中；
填充：14px44.3；
文字装饰：无；
边框样式：虚线；
}
.导航图片{
宽度：75%；
身高：75%；
保证金：自动；
边缘顶部：100px；
边框样式：双边框；
边框颜色：白色；
}

我的主页！

要素1

要素1子要素1
要素1子要素2

要素2
要素3
要素4
要素5
元素6

非常接近，只需查看子元素
您用于查找子
选项按钮的方法很接近，但不完全正确。在这个工作版本的代码中，我更改了click函数以使用
.children
方法来查找具有类
选项按钮的子级

工作示例：

函数main（）{
$（'.option按钮'）.hide（）；
$（'.nav按钮'）。在（'click'，function（）上{
$（this.children（'.option button'）.toggle（）；
});
}
$（文件）.ready（主）
.container{
溢出：自动；
身高：100%；
宽度：100%；
边框样式：双边框；
背景色：#1E15；
}
.标题{
字体系列：“副翼”；
字号：125px；
文本对齐：居中；
宽度：自动；
}
h4{
保证金：自动；
颜色：蓝色；
}
.导航栏{
宽度：75.5%；
边框样式：双边框；
保证金：自动；
填充：0；
}
.导航按钮{
列表样式类型：无；
溢出：隐藏；
背景色：白色；
}
.选项按钮{
列表样式类型：无；
溢出：隐藏；
背景色：白色；
}
李{
浮动：左；
显示：块；
字体系列：monospace；
文本对齐：居中；
填充：14px44.3；
文字装饰：无；
边框样式：虚线；
}
.导航图片{
宽度：75%；
身高：75%；
保证金：自动；
边缘顶部：100px；
边框样式：双边框；
边框颜色：白色；
}

我的主页！

要素1

要素1子要素1
要素1子要素2

要素2
要素3
要素4
要素5
元素6

我想您需要一些：

将ul放在li元素中，而不是外部。
在li元素上执行单击事件，而不是ul

<ul class = "nav-buttons">
              <li>Element 1<ul class ="option-button">
                  <li>Element 1 Sub Element 1</li>
                  <li>Element 1 Sub Element 2</li>
                </ul>
</li>


$('.nav-buttons li').on('click',function(){
    $(this).find("ul").toggle();
 });


元素1

要素1子要素1
要素1子要素2


$（'.nav buttons li'）。在（'click'，function（）上{
$（this.find（“ul”）.toggle（）；
});
。我们不需要整个页面如果你点击run demo，它会准确地显示正在发生的事情。当元素1被点击时，什么都不会发生，但预期会显示其他子元素。因此，将演示减少到问题所在的部分。你提供的大部分代码都是无关的。请阅读如何创建一个最小但切中要害的解决方案的指导原则@Jengo，你哭诉的人没有回答，他们在评论。他们试图改进问题和代码，这将有助于集中答案。当用户将您的问题识别为他们的问题时，这种集中的代码将有助于更容易地识别和理解发生了什么（对于新手和专业人士都是如此）。使用无关代码时，用户可能会将注意力集中在错误的部分，感到困惑或认为所有这些都是解决问题所必需的，而实际情况并非如此。简洁明了对每个人都有帮助。仅供参考，您的代码不能加粗。谢谢，您能向我解释一下为什么next（）不起作用吗？没问题，所以有几个原因。1） 您引用了
选项按钮
错误2）Next用于查找元素的下一个同级。因此jquery将要做的是找到
选项按钮
元素，然后查看后面是否有元素并返回该元素。在这种情况下，您的
li
标记中的
选项按钮之后没有任何元素。有关其工作原理的更多信息。你想让我在答案中包含这些信息吗？我会不会遇到显示任何元素（1,2,3,4,5,6）的所有子元素的问题？如果它没有孩子，什么都不应该发生。是的，你可以。在这种情况下，您甚至可以使用
eql