Почему jquery .next и .toggle не работают здесь

Question

Мне интересно, изменились ли .next и .toggle в jQuery с последними выпусками.Код, который я использовал для работы, и в этом коде не было никаких изменений.

Сценарий: (он должен открывать подменю)

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

Используемый вами селектор не подходит, см. Эту рабочую скрипку

$(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.