javascript - 使用 jQuery 扩展嵌套子导航项

Question

我有多个级别的嵌套链接导航，并且希望能够在单击时展开每个级别，但我为此编写的 jQuery 遇到了问题，我不确定下一步该去哪里。

这是我目前拥有的:

    	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');
 		});

<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>

这会产生这个:

我希望 '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>