(nav) click instead of hover, jquery old/new version

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>

I'm using a jquery for my nav(click instead of hover). Working with 1.6.2

version but not with 2.2.2. I don't know how to make it work on jquery version

2.2.2? If something missing tell me

 http://jsfiddle.net/r93f3wyf/

https://api.jquery.com/toggle-event/ See dupe for better alternative — A. Wolff, Apr 04 '16 at 13:34

score 0 · Answer 1 · answered Apr 04 '16 at 13:33

0

In your CSS, you have:

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

If you don't want to show it on hover - remove this.

answered Apr 04 '16 at 13:33

Gavin Thomas

1,196
6
10

not working, anything else? – asdadqw dasdasd Apr 04 '16 at 13:49

score 0 · Answer 2 · answered Apr 04 '16 at 13:33

Well that is because .toggle() event is depracted in jquery version 1.7 and removed in 1.9. You can rather toggle some class to element and then do toggling decision for event:

$("#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) click instead of hover, jquery old/new version

2 Answers2