使用jQuery扩展嵌套的子导航项

Question

我有多级嵌套链接的导航，并且希望能够在点击时扩展每个级别，但是我遇到了我为此编写的jQuery问题，而且我不知道下一步该怎么做。

这就是我目前所拥有的：

＆＃13;

＆＃13;

    	subMenuAnchor = $('.menu-item-has-children > a');
 		subMenuAnchor.append('<span class="aib plus-icon"></span>');
 		$('.sub-menu').hide();
 		subMenuAnchor.click(function(e) {
 			e.preventDefault();
 			$('.sub-menu').slideToggle(300);
 			$(this).toggleClass('submenu-active');
 		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="menu-item-208" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-208"><a href="#" class="">Neighbourhoods<span class="aib plus-icon"></span></a>
<ul class="sub-menu" style="display: none;">
    <li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-neighbourhoods menu-item-has-children menu-item-203"><a href="http://salford.dev/neighbourhoods/neighbourhood-1/" class="">Neighbourhood 1<span class="aib plus-icon"></span></a>
        <ul class="sub-menu" style="display: none;">
            <li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-210"><a href="http://salford.dev/services/name-health-centre/">Name Health Centre</a>
            </li>
            <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-209"><a href="http://salford.dev/services/name-surgery/">Name Surgery</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-204" class="menu-item menu-item-type-taxonomy menu-item-object-neighbourhoods menu-item-has-children menu-item-204"><a href="http://salford.dev/neighbourhoods/neighbourhood-2/">Neighbourhood 2<span class="aib plus-icon"></span></a>
        <ul class="sub-menu" style="display: none;">
            <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-258"><a href="http://salford.dev/services/name-surgery/">Name Surgery</a>
            </li>
            <li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-259"><a href="http://salford.dev/services/name-health-centre/">Name Health Centre</a>
            </li>
        </ul>
    </li>
</ul>
</li>

＆＃13;

＆＃13;

＆＃13;

产生这个：

我希望'Neighbourhood'项与'NEIGHBOURHOODS'项目相同。我需要对jQuery进行哪些更改才能使其正常工作？

Answer 1

我认为这就是你要找的东西：

subMenuAnchor = $('.menu-item-has-children > a');
subMenuAnchor.append('<span class="aib plus-icon"></span>');
$('.sub-menu').hide();
subMenuAnchor.click(function(e) {
  e.preventDefault();
  $(this).closest('li').find('.sub-menu').first().slideToggle(300);
  $(this).closest('a').toggleClass('submenu-active');
});

工作示例：

subMenuAnchor = $('.menu-item-has-children > a');
subMenuAnchor.append('<span class="aib plus-icon"></span>');
$('.sub-menu').hide();
subMenuAnchor.click(function(e) {
  e.preventDefault();
  $(this).closest('li').find('.sub-menu').first().slideToggle(300);
  $(this).closest('a').toggleClass('submenu-active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li id="menu-item-208" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-208"><a href="#" class="">Neighbourhoods<span class="aib plus-icon"></span></a>
<ul class="sub-menu" style="display: none;">
    <li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-neighbourhoods menu-item-has-children menu-item-203"><a href="http://salford.dev/neighbourhoods/neighbourhood-1/" class="">Neighbourhood 1<span class="aib plus-icon"></span></a>
        <ul class="sub-menu" style="display: none;">
            <li id="menu-item-210" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-210"><a href="http://salford.dev/services/name-health-centre/">Name Health Centre</a>
            </li>
            <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-209"><a href="http://salford.dev/services/name-surgery/">Name Surgery</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-204" class="menu-item menu-item-type-taxonomy menu-item-object-neighbourhoods menu-item-has-children menu-item-204"><a href="http://salford.dev/neighbourhoods/neighbourhood-2/">Neighbourhood 2<span class="aib plus-icon"></span></a>
        <ul class="sub-menu" style="display: none;">
            <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-258"><a href="http://salford.dev/services/name-surgery/">Name Surgery</a>
            </li>
            <li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-services menu-item-259"><a href="http://salford.dev/services/name-health-centre/">Name Health Centre</a>
            </li>
        </ul>
    </li>
</ul>
</li>