实现导航栏菜单的切换状态

Question

我正在为一些导航栏链接构建导航栏和下拉菜单。目前，只要您单击导航栏上的链接，它就会永久保持切换状态，即使您单击导航栏上的另一个链接，除非您再次单击相同的链接，否则它不会取消选择。我该如何解决这个问题？

首先，我想修复活动类，以便仅在最后点击的元素上正确添加/删除它。

最终结果应该类似于这个导航栏： example 我希望能够：

1. 单击菜单项#1，并显示一个下拉菜单；
2. 再次单击菜单项#1，然后将其隐藏。

案例2：

1. 单击菜单项#1 及其下拉菜单；

2. 单击任何其他项目#N 并隐藏第一个项目；

3. 显示您单击的项目#N。

   购买
学习 写作 教育 泥瓦匠

Answer 1

要添加或更改样式，您应该添加类。您已经添加了 active 类，但是，当您单击另一个链接时，您必须删除之前选择的链接。请在此处查看结果：或使用 sn-p: 或使用 sn-p:example on jsfiddle

如您所见，我在ul 元素中添加了一个.menu 类，以方便您使用(<ul class="menu">)。

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

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

您可以在这里查看类似的页面：https://stackoverflow.com/a/20179446/6901693