（NAV）点击，而不是悬停，

Question

$("#nav ul").css({display: "none"}); 
 
$("#nav li").toggle(function(){ 
 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); 
 
    },function(){ 
 
    $(this).find('ul:first').css({visibility: "hidden"}); 
 
});

nav { 
 
    background-color: #333; 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    width: 100%; 
 
    height: 4vw; 
 
} 
 

 
#nav { 
 
    height: 100%; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
#nav li { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    float: left; 
 
    width: 14.28%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#nav li a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #fff; 
 
    line-height: 4vw; 
 
    text-align: center; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 2vw; 
 
    font-weight: 600; 
 
} 
 

 
#nav ul li { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-top: 0.2vw; 
 
} 
 

 
#nav ul { 
 
    width: 130%; 
 
    background: #444; 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("images/bg01.png"); 
 
    display: none; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0%; 
 
} 
 

 
#nav ul ul { 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 

 
#nav ul li { 
 
    display: block; 
 
    visibility: visible; 
 
} 
 

 
#nav li:hover > ul { 
 
    display: block; 
 
    visibility: visible; 
 
}

<nav> 
 
    <ul id="nav"> 
 
    <li> 
 
     <a href="index.html" id="was">home</a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">news</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">lol1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">lol2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">news2</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">lol</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">comments</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

我使用一个jQuery为我导航jQuery的旧/新版本（点击而不是悬停）。使用1.6.2

版本，但不是2.2.2。我不知道如何使它在jQuery版本上工作

2.2.2？如果缺了点什么告诉我

http://jsfiddle.net/r93f3wyf/ 

Answer 1

在你的CSS，你有：

#nav li:hover > ul { 
    display: block; 
    visibility: visible; 
} 

如果你不想显示它悬停 - 删除此。

Answer 2

那是因为.toggle()事件在jquery版本1.7中被删除，并在1.9中被删除。你可以切换，而一些类元素，然后做决定切换事件：

$("#nav li").click(function(){ 
if($(this).hasClass('dotoggle')) 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); 
else 
    $(this).find('ul:first').css({visibility: "hidden"}); 
$(this).toggleClass('dotoggle') 
});