为什么jquery .next和.toggle在这里不起作用

Question

我想知道jQuery中的.next和.toggle是否已随着最新版本进行了更改。 我曾经使用过的代码，对该代码没有任何更改。

脚本：（应该打开子菜单）

$(document).ready(function() {
  $('.dropdown-submenu a.HasDropDown').on("click", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
    //alert("menu clicked");
  });
});

<li class="dropdown-submenu">
  <a style="color: gainsboro; background-color: black !important;" href="/EntityPersonAddress/List">
    	    Addresses
    	</a>
</li>

<li class="dropdown-submenu">
  <span>
    	    <a class="HasDropDown" style="color: gainsboro; background-color: black !important;" href="#">
    		   XX Management
    	    </a>
    	</span>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/TCO/Edit">
    		    TCO
    		</a>
    </li>
    <li class="dropdown-submenu">
      <a style="color: gainsboro; background-color: black !important;" href="/Report/TCO">
    		    TCO Reports
    		</a>
    </li>
  </ul>
</li>

Answer 1

您使用的选择器不好，see this working fiddle

$(document).ready(function() {
  $('.dropdown-submenu a.HasDropDown').on("click", function(e) {
    $(this).parent().next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
    //alert("menu clicked");
  });
});

.dropdown-menu元素与.HasDropDown的父元素（即span元素的父元素处于同一级别。