Implementing toggle state to navbar menu-CodePudding

I'm building a navbar and dropdown menu for a few of the navbar links. Currently anytime you click on a link on the navbar, it stays toggled permanently, even if you click another link on the navbar, it does not unselect unless you click the same link again. How can I fix this?

Firstly, I want to fix the active class so it would be added/removed properly on the last clicked element only.

The end result should be similar to this navbar: example I want to be able to:

click on menu item#1, and show a dropdown for it;
click on menu item#1 again, and hide it.

case 2:

click on menu item#1, and the dropdown for it;
click on any other item#N and hide fir the 1st one;
display for the item#N you click on.

Please take a look at the JSFiddle here: https://jsfiddle.net/v45q3ykh/6/

<div class="main-nav">
  <div class="container">
    <div class="row">
      <div class="col-xl-9">
        <ul>
          <li class="nav-btn">
            <a href="#">Purchases</a>
            </li>
          <li class="nav-btn">
            <a href="#">Studies</a>
          </li>
          <li class="nav-btn">
            <a href="#">Writing</a>
          </li>
          <li class="nav-btn">
            <a href="#">Education</a>
          </li>
          <li class="nav-btn">
            <a href="#">Masons</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('.nav-btn').click(function() {
    $(this).parent().find('.sub-menu').slideToggle();
    $(this).toggleClass('active');
  });
});

CodePudding user response：

To add or change styles, you should add classes. You have already added the active class, however, when you click on another link, you have to remove the previously selected one. Please see the results here: or use a snippet: or using a snippet:example on jsfiddle

As you may see, I have added a .menu class to the ul element to make it easier for you (<ul >).

$(document).ready(function() {
  $('.nav-btn').on('click', function() {
    if ($(this).hasClass('active')) {
      $('.nav-btn').removeClass('active');
      $('.menu > .sub-menu').slideUp();
    } else {
      $('.nav-btn').removeClass('active');
      $('.menu > .sub-menu').slideUp();
      $(this).toggleClass('active');
      $('.menu > .sub-menu').slideDown();
    }
  });
});

Show code snippet

$(document).ready(function() {
  $('.nav-btn').on('click', function() {
    if ($(this).hasClass('active')) {
      $('.nav-btn').removeClass('active');
      $('.menu > .sub-menu').slideUp();
    } else {
      $('.nav-btn').removeClass('active');
      $('.menu > .sub-menu').slideUp();
      $(this).toggleClass('active');
      $('.menu > .sub-menu').slideDown();
    }
  });
});

/*main nav*/
.main-nav {
  border-top: #D9D9D9;
  border-bottom: #D9D9D9;
  background: #F4F4F4;
  padding: 10px 0;
  position: relative;
}

.close-menu {
  margin: 5px;
  display: none
}

.mobile-sidemenu {
  display: none
}

.main-nav ul {
  padding: 0;
  list-style: none;
  margin: 0;
  display: inline-block;
}

.main-nav ul li {
  display: inline-block;
  margin-right: 15px;
  position: relative
}

.main-nav ul li a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 8px;
  color: #3D3D3D;
  text-decoration: none
}

.main-nav ul li .drop-ico {
  margin-left: 7px;
}

.main-nav .right-menu-link {
  display: inline-block;
  float: right;
  color: #3D3D3D;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  position: relative
}

.main-nav .nav-btn:before,
.main-nav .right-menu-link:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -10px;
  width: 0;
  transition: .2s;
  height: 4px;
  background: #3D3D3D;
}

.main-nav .nav-btn:hover:before,
.main-nav .nav-btn.active:before,
.main-nav .right-menu-link:hover:before {
  width: 100%;
  transition: .2s;
}

.main-nav .nav-btn:hover a,
.main-nav .nav-btn.active a,
.main-nav .right-menu-link:hover {
  color: #3D3D3D
}

/*sub menu*/
.sub-menu {
  position: absolute;
  width: 100%;
  left: 0;
  top: 60px;
  padding: 40px 0;
  background: #fff;
  box-shadow: -1px 12px 8px rgb(0 0 0 / 25%);
  z-index: 9;
  display: none;
  border-top: 1px solid #891C5B
}

.main-nav .sub-menu a {
  padding: 8px 0
}

.sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-menu ul li {
  padding: 10px 0;
  display: block;
  margin: 0;
}

.sub-menu .sub-title {
  text-transform: uppercase;
  display: block;
  margin-bottom: 15px;
  position: relative;
  font-weight: 600;
  font-size: 13px;
}

.sub-menu .sub-title:before {
  content: '';
  width: 60px;
  background: #C4C4C4;
  height: 2px;
  display: block;
  position: absolute;
  bottom: -6px;
}

.sub-menu .menu-icon {
  display: inline-block;
  background: #EDECEE;
  width: 48px;
  height: 48px;
  border-radius: 2px;
  vertical-align: middle;
  position: relative;
  margin-right: 8px;
}

.sub-menu a {
  text-decoration: none
}

.sub-menu .menu-icon img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
}

.sub-menu .text {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 65px);
}

.sub-menu strong {
  font-size: 15px;
  color: #000;
  line-height: 16px;
  display: block;
  font-weight: 600;
}

.sub-menu span {
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(0 0 0 / 80%);
  font-weight: 400;
}

.sub-menu a:hover {
  text-decoration: none;
}

.sub-menu .more-menu {
  font-size: 13px;
  color: #4F515FCC;
  font-weight: 600;
  margin-top: 20px;
  display: table;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>

    <div class="main-nav">
      <div class="container">
        <div class="row">
          <div class="col-xl-9">
            <ul class="menu">
              <li class="nav-btn">
                <a href="javascript:void(0)">Purchases</a></li>
              <div class="sub-menu">
                <div class="container">
                  <div class="row">
                    <div class="col-xl-3">
                      <strong class="sub-title">Books</strong>
                      <ul>
                        <li>
                          <a href="javascript:void(0)">
                            <div class="text">
                              <strong>Test</strong>
                              <span>Dummy text for testing</span>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <li class="nav-btn">
                <a href="javascript:void(0)">Studies</a>
              </li>
              <li class="nav-btn">
                <a href="javascript:void(0)">Writing</a>
              </li>
              <li class="nav-btn">
                <a href="javascript:void(0)">Education</a>
              </li>
              <li class="nav-btn">
                <a href="javascript:void(0)">Masons</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>

</html>

You could have a look at the similar page here: https://stackoverflow.com/a/20179446/6901693