javascript - 标签上的 preventdefault() 不起作用

Question

我是 javascript 的新手，我正在使用 Javascript 编写 Accordion 菜单。我成功了。但最后我的程序有一个错误。

假设大写字母是一级菜单，小写字母是二级菜单。

如果 A 有 child ，点击 A 时显示“a b c d”。

如果还没有显示页面链接到A。

这是我要申请的条件。

但是我在某处被阻止了。实际上，它就像

如果 A 有 child ，点击 A 时显示“a b c d”。如果没有，A 是不可点击的链接。

这是我的源代码。

MyJSFile.js

$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");

      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }

    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

这是我的 CSS 类的 MyCSS.css

#nav {   
  padding-left:0px;
  display: block; 
  width: 100%;
  margin: 0 auto;
}

#nav li {
    list-style-type: none;
 }
#nav > li > a:hover, #nav > li > a.open {
    color: #FFF;
    background-color: #38454B;

    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.35, #212121),
    color-stop(1, #866F4A));
    background-image: -o-linear-gradient(bottom, #212121 35%, #866F4A 100%);
    background-image: -moz-linear-gradient(bottom, #212121 35%, #866F4A 100%);
    background-image: -webkit-linear-gradient(bottom, #212121 35%, #866F4A 100%);
    background-image: -ms-linear-gradient(bottom, #212121 35%, #866F4A 100%);
    background-image: linear-gradient(to bottom, #212121 35%, #866F4A 100%);
}

#nav li ul {
    display: none;
    background-color: #CCC;
    list-style-type: none; 
}

HTML 导航在这里

 <nav>
      <ul id="nav">
        <li><a href="">Accueil</a></li>

        <li><a href="Aller à la page 1">Podologie</a>
          <ul>
            <li><a href="Aller à la page 2.1">Présentation</a></li>
            <li><a href="">*Pododiabétologie</a></li>
            <li><a href="">*Podopédiatrie</a></li>
            <li><a href="">*Podologie sportive</a></li>
            <li><a href="Aller à la page 2.3">Les conseils du podologue</a></li>
          </ul>
        </li>

        <li><a href="index.php?pays=FR&page=contact">Contacts</a>
          <ul>
            <li><a href="http:/www.google.com/search?q=web+design+icons">Lien1</a></li>
            <li><a href="http:/www.google.com/search?q=web+design+tutorials">Lien2</a></li>
            <li><a href="http:/www.google.com/search?q=web+design+user+interface">Lien3</a></li>
            <li><a href="http:/www.google.com/search?q=web+design">Lien4</a></li>
          </ul>
        </li>
      </ul>
    </nav>

由第三方编辑:

JSFiddle 在这里:http://jsfiddle.net/3STdc/

Answer 1

if ($(this).parent().has("ul")) 将始终为 true，因为 it returns a jQuery object .

替换为 if ($(this).parent().has("ul").length)

http://jsfiddle.net/mblase75/cUthP/

if ($(this).siblings('ul').length) 稍微短一点，也可以。