检查菜单中的链接

Checking for links in menu

本文关键字：链接 菜单 检查      更新时间：2023-09-26

我有一个代码，我有链接在菜单和子菜单。我试着写脚本，检查如果这个"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>

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

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

if(Object)总是正确的

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

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


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

直接返回true;而不是

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

返回true保持正常的浏览器行为(在本例中遵循链接)。返回false取消默认浏览器行为:)

相关文章：