實作導航欄選單的切換狀態-有解無憂

我正在為一些導航欄鏈接構建導航欄和下拉選單。目前，無論何時單擊導航欄上的鏈接，它都會永久保持切換狀態，即使您單擊導航欄上的另一個鏈接，它也不會取消選擇，除非您再次單擊同一鏈接。我怎樣才能解決這個問題？

首先，我想修復活動類，以便僅在最后單擊的元素上正確添加/洗掉它。

最終結果應該類似于這個導航欄：示例我希望能夠：

點擊選單項#1，并顯示它的下拉選單；
再次單擊選單項#1，并將其隱藏。

案例2：

點擊選單項#1，以及它的下拉選單；
單擊任何其他專案#N 并隱藏第一個；
顯示您單擊的專案#N。

請在這里查看 JSFiddle：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');
  });
});

uj5u.com熱心網友回復：

要添加或更改樣式，您應該添加類。您已經添加了active該類，但是，當您單擊另一個鏈接時，您必須洗掉之前選擇的一個。請在此處查看結果：或使用代碼段：或使用代碼段：jsfiddle 上的示例

如您所見，我.menu向ul元素添加了一個類，以便您更輕松地 ( <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();
    }
  });
});

顯示代碼片段

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343462.html

標籤：javascript html 查询 css 推特引导

上一篇：如何在物化自動完成輸入中設定默認值？

下一篇：jQuery：if/else陳述句：它無法讀取else陳述句，它只能首先讀取if