Question

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

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

如果A有孩子，请在点击A时显示“a b c d”。

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

这是我想申请的条件。

但我在某处被封锁了。实际上，它就像

一样

如果A有孩子，单击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)略短，也可以。

<a> tag is not working</a>上的preventdefault（）

1 个答案: