为什么jquery .next和.toggle不能在这里工作

Posted 2021-03-27

我想知道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>

答案

你使用的选择器不好，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元素）的父级处于同一级别。