javascript jquery html css jquery-mobile-navbar

Dropdown menu from hover to onclick

How would I convert the following sub-navigation menu from hover to on-click with j-query? In the example I have added an active class and used j-query to display the sub-nav however it disappears after the user clicks it.

https://codepen.io/patriciaworth/pen/bGGMBow

I followed the instructions on this webpage to no avail.

how to change dropdown menu from hover to onclick

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Liive Real Estate</title>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            Liive
        </div>
        <div class="toggle">&#9776;</div>
        <div class="panel">
            <div class="links">
                <ul>
                  <li><a href="">Home</a></li>
                  <li>
                    <a href="">Property</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="">Agents</a>
                    <ul>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                        <li><a href="">bla bla</a></li>
                    </ul>
                  </li>
                  <li><a href="">Pages</a></li>
                  <li><a href="">Contact</a></li>
                </ul>
            </div>
            <div class="signup">
                <button>Signup</button>
            </div>
        </div>
    </nav>
</body>
</html>

SCSS

/*reset*/
*
{
    margin: 0;
    padding:0;
    list-style-type: none;
    border: none;
    text-decoration: none;
}
html
{
    width:100%;
    min-width: 320px;
    max-width: 1920px;
    margin: 0 auto;
    background: #ccc;
}

//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;

//fonts
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;

//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;

.panel
{
    display: block;
}

.navbar
{
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: $heading-font;
    padding:  0 20px;

    @media screen and (max-width: $medium)
    {
        display: block;
        padding: 0;
    }
    .logo
    {
        flex:1;
        text-align: left;
        font-size: 22px;
        color: $purple;
        font-weight: 500;

        @media screen and (max-width: $medium)
        {
            display: block;
            border-bottom: 1px solid $purple;
            text-align: left;
            padding: 20px;
        }
    }
    .toggle
    {
        display: none;

        @media screen and (max-width: $medium)
        {
            display: block;
            position: absolute;
            top: 20px;
            right:20px;
            font-family: $heading-font;
            color: #000;
            font-size: 18px;
            cursor: pointer;
        }
    }
    .panel
    {
        flex: 7;
        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: $medium)
        {
            display: none;
        }

        .links
        {
            flex:6;
            text-align: center;
            font-size: 16px;
            line-height: 25px;
        }
    }

    ul 
    { 
        display: block;
        width: 100%; 

        @media screen and (max-width: $medium)
        {
            padding: 20px 0;
        }
    }
    li 
    {
        display: inline-block;
        @media screen and (max-width: $medium)
        {
            display: block;
        }
    }
    ul li a
    {
        transition: 0.5s;
        color: #000;
        padding: 20px 10px;
        display: block;
    text-decoration: none;

        @media screen and (max-width: $medium)
        {
            padding:5px 0;
        }
    }
    ul li a:hover
    {
        background: $purple;
        color: #fff;
    }
    ul li ul
    {
        width: 200px;
        padding: 10px 20px;
        box-sizing: border-box;
        background: #333;
        display: none;
        position: absolute;
        top: 65px;

        @media screen and (max-width: $medium)
        {
            position: relative;
            top:0;
            width: 100%;
        }
    }
    ul li ul li
    {
        display: block;
        text-align: left;
        @media screen and (max-width: $medium)
        {
            text-align: center;
        }
        a
        {
            font-size: 14px;
            padding: 0;
            color: #fff;
            background: transparent !important;
            &:hover
            {
                color: $purple;
                background: transparent !important;
            }
        }
    }

    ul li:hover ul
    {
        display: block;
    }
    ul li:hover a
    {
        background: $purple;
        color: #fff;
    }

  /*THIS DOES NOT WORK*/
    /*.active
    {
        display: block !important;
        a
        {
            background: $purple;
            color: #fff;
        }
    }*/

    .signup
    {
        flex:1;
        text-align: right;

        button
        {
            border: 1px solid $purple;
            padding: 10px 15px;
            background: transparent;
            font-size: 16px;
            transition: 0.5s;
            cursor: pointer;

            &:hover
            {
                background: $purple;
                color: #fff;
            }
        }

        @media screen and (max-width: $medium)
        {
            text-align: center;
            padding-bottom: 20px;
            display: block;
        }

    }

}

$(document).ready(function(){
        $(".toggle").click(function(){
            $("nav .panel").slideToggle();
        });
        /*THIS DOES NOT WORK*/
        /*$("nav").on("click", "li", function(){
            $(this).children("ul").toggleClass("active");
            $("nav li").not(this).children("ul").removeClass("active");
        });*/
    });

Solution

You can directly covert the hover class into an active class, and then on click, toggle the active class. Find the below snippet and view in full screen so that its not affected by the media-queries.

Additinally, you need to include href="#" or else it will reload the page.

ul li.active ul {
  display: block;
}

ul li.active a {
  background: $purple;
  color: #fff;
}

$(document).ready(function() {

  $(".toggle").click(function() {
    $("nav .panel").slideToggle();
  });

  $("nav").on("click", "li", function() {
    $('nav li.active').not(this).removeClass("active"); // remove previous selection
    $(this).toggleClass("active");
  });
});

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/*reset*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  text-decoration: none;
}

html {
  width: 100%;
  min-width: 320px;
  max-width: 1920px;
  margin: 0 auto;
  background: #ccc;
}

.panel {
  display: block;
}

.navbar {
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  padding: 0 20px;
  /*THIS DOES NOT WORK*/
  /*.active {
		 display: block !important;
		 a {
			 background: $purple;
			 color: #fff;
		}
	}
	*/
}

@media screen and (max-width: 992px) {
  .navbar {
    display: block;
    padding: 0;
  }
}

.navbar .logo {
  flex: 1;
  text-align: left;
  font-size: 22px;
  color: #a491d3;
  font-weight: 500;
}

@media screen and (max-width: 992px) {
  .navbar .logo {
    display: block;
    border-bottom: 1px solid #a491d3;
    text-align: left;
    padding: 20px;
  }
}

.navbar .toggle {
  display: none;
}

@media screen and (max-width: 992px) {
  .navbar .toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Poppins', sans-serif;
    color: #000;
    font-size: 18px;
    cursor: pointer;
  }
}

.navbar .panel {
  flex: 7;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  .navbar .panel {
    display: none;
  }
}

.navbar .panel .links {
  flex: 6;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
}

.navbar ul {
  display: block;
  width: 100%;
}

@media screen and (max-width: 992px) {
  .navbar ul {
    padding: 20px 0;
  }
}

.navbar li {
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .navbar li {
    display: block;
  }
}

.navbar ul li a {
  transition: 0.5s;
  color: #000;
  padding: 20px 10px;
  display: block;
  text-decoration: none;
}

@media screen and (max-width: 992px) {
  .navbar ul li a {
    padding: 5px 0;
  }
}

.navbar ul li a:hover {
  background: #a491d3;
  color: #fff;
}

.navbar ul li ul {
  width: 200px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #333;
  display: none;
  position: absolute;
  top: 65px;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul {
    position: relative;
    top: 0;
    width: 100%;
  }
}

.navbar ul li ul li {
  display: block;
  text-align: left;
}

@media screen and (max-width: 992px) {
  .navbar ul li ul li {
    text-align: center;
  }
}

.navbar ul li ul li a {
  font-size: 14px;
  padding: 0;
  color: #fff;
  background: transparent !important;
}

.navbar ul li ul li a:hover {
  color: #a491d3;
  background: transparent !important;
}

.navbar ul li.active ul {
  display: block;
}

.navbar ul li.active a {
  background: #a491d3;
  color: #fff;
}

.navbar .signup {
  flex: 1;
  text-align: right;
}

.navbar .signup button {
  border: 1px solid #a491d3;
  padding: 10px 15px;
  background: transparent;
  font-size: 16px;
  transition: 0.5s;
  cursor: pointer;
}

.navbar .signup button:hover {
  background: #a491d3;
  color: #fff;
}

@media screen and (max-width: 992px) {
  .navbar .signup {
    text-align: center;
    padding-bottom: 20px;
    display: block;
  }
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<nav class="navbar">
  <div class="logo">
    Liive
  </div>
  <div class="toggle">&#9776;</div>
  <div class="panel">
    <div class="links">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Property</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Agents</a>
          <ul>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
            <li><a href="#">bla bla</a></li>
          </ul>
        </li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="signup">
      <button>Signup</button>
    </div>
  </div>
</nav>