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对象中匹配选择器的length

更改

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

要

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

Answer 2

简单地返回true;而不是

  $(this).css( "color", "yellow" );

返回true保持正常的浏览器行为（在这种情况下遵循链接）。返回false取消默认浏览器行为：）

检查菜单中的链接

2 个答案: