jQuery toggle nested inside trigger not working
<p>For some reason, the below simple script won't work - I want the sub-menu to toggle when I click on the Portfolio link (the sub-menu hides correctly). </p>

<p>If I change the trigger div so that it's elsewhere on the page, it works fine. Can someone explain what the problem with the below is? Are you not allowed to nest or something?</p>

<p>Thanks in advance.</p>

<p>JS:</p>

<pre><code>&lt;script&gt;
jQuery(document).ready(function ($) {
  $('.sub-menu').hide();
  $('#menu-item-154 &gt; a').click(function(){
    $('.sub-menu').toggle();
  });
});
&lt;/script&gt;
</code></pre>

<p>Page HTML</p>

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