Javascript 嵌套在触发器内的jQuery切换不起作用

由于某些原因，下面的简单脚本无法工作-我希望在单击“公文包”链接时切换子菜单（子菜单正确隐藏）

如果我更改trigger div，使其位于页面上的其他位置，它就可以正常工作。有人能解释一下下面的问题是什么吗？你是不是被允许去筑巢什么的

JS:

jQuery（文档）.ready（函数（$）{
$（'.sub-menu'）.hide（）；
$（'#菜单项-154>a'）。单击（函数（）{
$（'.sub-menu'）.toggle（）；
});
});

页面HTML

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="">
    <li id="menu-item-154" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-154">
      <a href="#">Portfolio</a>
      <ul class="sub-menu">
        <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="/?page_id=20">ITEM 1</a></li>
        <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="/?page_id=48">ITEM 2</a></li>
      </ul>
    <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-56"><a href="/?cat=1">NEWS &#038; BLOG</a></li>
  </ul>
</div>

使用

find（）

---

您没有在投资组合之后关闭

li

：

<li id="menu-item-154" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-154">
  <a href="#">Portfolio</a>
</li>

---

? - 编辑：该html中有一个未关闭的

。我已经更正了那把小提琴中的html，这样它就可以正确嵌套了。这可能是您的问题。看起来您现在已经修复了html。你还有问题吗？正在加载双重检查jQuery。您的菜单是否也在加载DOM后添加到页面？@Adam错误的HTML似乎并未在原始JSFIDLE中造成问题。您可能试图将事件绑定到尚不存在的对象。尽管使用

on（）

可以轻松修复，但不要担心。尼克，你能重新删除代码吗？因此，这个问题对其他人来说是有意义的，这可能会造成同样的错误。

的关闭在

之后。。检查它在html中有一个未关闭的

，作者已经马上纠正了，所以这应该被标记为正确的答案为什么使用一个函数来提供不同的（而且，我认为是不正确的）功能，而实际上发布的代码似乎没有问题？

  $('.sub-menu').hide();
  $('#menu-item-154').find('a').click(function(){
    $('.sub-menu').toggle();
  });

<li id="menu-item-154" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-154">
  <a href="#">Portfolio</a>
</li>

<a id="opensub1" href="#">Portfolio</a>