jquery - how to change dropdown menu from hover to onclick

Question

Need to change the menu dropdown from hover to onclick: i have attached the css and the html code i have also attached the working fiddle https://jsfiddle.net/prabashanash/wafp2bae/

#navContainer {
  margin: 41px 0 0 0px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */
  text-align: center;
  width: 100%;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

#navContainer ul li:hover ul {
  /*width: 19%;*/
  position: static;
  display: block;
  right: 244px;
  top: 50px;
  float: right;
}

<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

So let's take this apart a little bit. For starters, I assume you have jquery referenced already.

Lets start by changing the :hover selector for the sub list to it's own selector.

Old CSS:

#navContainer ul li:hover ul {
        /*width: 19%;*/
        position: static;
        display: block;
        right: 244px;
        top: 50px;
        float: right;   
    }

New CSS:

.active {
        /*width: 19%;*/
        position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

I added a couple !important statements because you need these to override any other setting. It might be necessary to add !important to each of the other, but not necessarily needed.

Now we want to make the JQuery selector. In your JS file (or inside script tags on your html doc), we need to find the elements and bind the event to them. We can do that by using the JQuery .on function.

First we need the base container which is identified by the id #navContainer. Then we can make bind the event as such:

$("#navContainer").on("click", "li", function(){

});

From there on we simply have to add or remove the class on click. We can do that by using the toggleClass JQuery function. Edit: We also will need to remove the active component on any other drop down lists in case multiple are open.

$("#navContainer").on("click", "li", function(){ 
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

This works because the .on bind is to every unordered list inside a list item in the container Since we changed the :hover selector to be for the active class, it becomes simply toggling the class on and off on click.

Hope this helps!

Edit: Embedded Snippet

$("#navContainer").on("click", "li", function(){
   $(this).children("ul").toggleClass("active");
   $("#navContainer li").not(this).children("ul").removeClass("active");
});

#navContainer {
  margin: 41px 0 0 0px;
  padding: 0;
  background: #424445;
  /* border: 1px solid #7398ba; */
  text-align: center;
  width: 100%;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 8px;
}

#navContainer ul li span:hover {
  /*background: pink;*/
}

#navContainer ul li a:hover {
  background: black;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul ul li a {
  background: #bec8cb;
}

.active {
        /*width: 19%;*/
        position: static !important;
        display: block !important;
        right: 244px;
        top: 50px;
        float: right;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
        <li><a href="#">Our business</a></li>
        <li><a href="#">Our History </a></li>
      </ul>
    </li>
    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a>
        </li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
    <li><span><a href="#">Contact</a></span></li>
    <li><span><a href="#">News</a></span></li>

    <li>
      <span><a href="#">Services</a></span>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web templates </a></li>
        <li><a href="#">Tutorials </a></li>
      </ul>
    </li>
  </ul>
</div>