javascript - 检查菜单中的链接

Question

我有一个代码，其中菜单和子菜单中有链接。我尝试编写脚本并检查此“li”是否有子菜单，此链接不起作用，但如果“li”没有子菜单此链接必须移至其href。

$(document).on("click", ".name ul li a", function (e) {
  if ($(this).next("ul")) {
     e.preventDefault();
     if ($(this).parent().hasClass("active")) {
         $(this).next("ul").show();
         $(this).parent().removeClass("active");
     }
     else {
         $(this).next("ul").hide();
         $(this).parent().addClass("active");
     }
   }
  else {
    $(this).css( "color", "yellow" );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "name">
<ul>
  <li><a href="#">text A</a></li> 
  <li><a href="#">text A</a>
      <ul>
        <li><a href="#">text B</a></li>
        <li><a href="#">text B</a></li>
       </ul>
     </li>
  <li><a href="#">text A</a></li>
  <li><a href="#">text A</a></li>
  <li><a href="#">text A</a>
      <ul>
        <li><a href="#">text B</a></li>
        <li><a href="#">text B</a></li>
       </ul>
   </li>
</ul>
</div>

但是现在菜单中的所有链接都不起作用。请告诉我哪里出错了？

Answer 1

您的 if 将始终为真，因为即使没有找到选择器匹配，$(this).next("ul") 也始终会创建一个对象。

if(Object) 始终为真

您需要检查 jQuery 对象中匹配选择器的长度

改变

if ($(this).next("ul")) {

至

if ($(this).next("ul").length) {