Question

Button

$("#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;
}

我正在为导航使用jquery（点击而不是悬停）。使用1.6.2

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

2.2.2？如果缺少的东西告诉我

<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>

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')
});

（nav）点击而不是悬停，jquery旧/新版本

2 个答案: