打開 1 個抽屜時的切換邏輯

Question

我目前有一個工作抽屜，當單擊按鈕並打開抽屜時，它會從+偽切換到- 。

但是，如果連續打開兩個抽屜，jQuery 不知道第一個抽屜現在已關閉（因為第二個抽屜已打開）。 我在下面添加了 jQuery 腳本：

 $(document).ready(function() { $(".nav-acdn-container .mob-nav-btn").click(function() { $(this).toggleClass('plus-sign minus-sign'); $(this).next().toggle(); if ($('.nav-acdn-container ul:visible').length > 1) { $('.nav-acdn-container ul:visible').hide(); $(this).next().show(); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav-content-m header-btn-hidden" data-panel="nav-btn-m"> <div class="nav-acdn-wrapper"> <div class="nav-acdn-container"> <div class="mob-nav-btn plus-sign">Products</div> <ul class="ul-reset"> <li class="nav-acdn-item"><a href="27d-gel-polish-4-c.asp">27D Gel Polish</a></li> <li class="nav-acdn-item"><a href="accessories-11-c.asp">Accessories</a></li> <li class="nav-acdn-item"><a href="acrylic-powder-collections-7-c.asp">Acrylic Powder Collections</a></li> <li class="nav-acdn-item"><a href="acrylic-products-2-c.asp">Acrylic Products</a></li> <li class="nav-acdn-item"><a href="brushes--cases-6-c.asp">Brushes & Cases</a></li> <li class="nav-acdn-item"><a href="files-forms-tips-10-c.asp">Files, Forms, Tips</a></li> <li class="nav-acdn-item"><a href="gel-products-3-c.asp">Gel Products</a></li> <li class="nav-acdn-item"><a href="glamour-collection-12-c.asp">Glamour Collection</a></li> <li class="nav-acdn-item"><a href="nail-art-8-c.asp">Nail Art</a></li> <li class="nav-acdn-item"><a href="nail-wraps-5-c.asp">Nail Wraps</a></li> <li class="nav-acdn-item"><a href="network-gel-21-c.asp">Network Gel</a></li> <li class="nav-acdn-item"><a href="no1-wipe-gel-17-c.asp">No.1 Wipe Gel</a></li> <li class="nav-acdn-item"><a href="orgasmic-paints-9-c.asp">Orgasmic Paints</a></li> <li class="nav-acdn-item"><a href="pop-art-gel-16-c.asp">Pop Art Gel</a></li> <li class="nav-acdn-item"><a href="soak-off-polygel-18-c.asp">Soak Off PolyGEL</a></li> </ul> <!-- /.ul-reset --> </div> <!--/.nav-acdn-container--> <div class="nav-acdn-container"> <div class="mob-nav-btn plus-sign">Webpages</div> <ul class="ul-reset"> <li class="nav-acdn-item"> <a href="index.asp">Home</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> <li class="nav-acdn-item"> <a href="about-us-1-w.asp">About Us</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> <li class="nav-acdn-item"> <a href="about-me-4-w.asp">About Me</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> <li class="nav-acdn-item"> <a href="courses-3-w.asp">Courses</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> <li class="nav-acdn-item"> <a href="course-dates-21-w.asp">Course Dates</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> <li class="nav-acdn-item"> <a href="contact-us-2-w.asp">Contact Us</a> </li> <!-- /.flex-col .d-col-6 .webpages-item --> </div> <!--/.nav-acdn-container--> </div> <!-- /.nav-acdn-wrapper --> </nav> <!-- /.nav-content-m .header-btn-hidden -->

<style>
.minus-sign:after {
    content: "\f068";
    font-family: FontAwesome;
    font-size: 1.2rem;
    padding-right: 1.2rem;
    position: absolute;
    right: 0;
}

.plus-sign:after {
    content: "\f067";
    font-family: FontAwesome;
    font-size: 1.2rem;
    padding-right: 1.2rem;
    position: absolute;
    right: 0;
}
</style>

Answer 1

問題是因為您的邏輯會檢測子菜單之一是否打開，然后關閉兩者，但只重置當前菜單上的 CSS 樣式。

為了解決這個問題，並改進邏輯，你可以在.nav-acdn-container元素上切換一個類並將所有相關的 CSS 鈎起來，如下所示：

 $(".nav-acdn-container .mob-nav-btn").click(function() { var $target = $(this).closest('.nav-acdn-container').toggleClass('open'); $('.nav-acdn-container').not($target).removeClass('open'); });

 .nav-acdn-container .mob-nav-btn:after { content: '+'; } .nav-acdn-container ul { display: none; } .nav-acdn-container.open .mob-nav-btn:after { content: '-'; } .nav-acdn-container.open ul { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav-content-m header-btn-hidden" data-panel="nav-btn-m"> <div class="nav-acdn-wrapper"> <div class="nav-acdn-container open"> <div class="mob-nav-btn">Products</div> <ul class="ul-reset"> <li class="nav-acdn-item"><a href="27d-gel-polish-4-c.asp">27D Gel Polish</a></li> <li class="nav-acdn-item"><a href="accessories-11-c.asp">Accessories</a></li> <li class="nav-acdn-item"><a href="acrylic-powder-collections-7-c.asp">Acrylic Powder Collections</a></li> <li class="nav-acdn-item"><a href="acrylic-products-2-c.asp">Acrylic Products</a></li> <li class="nav-acdn-item"><a href="brushes--cases-6-c.asp">Brushes &amp; Cases</a></li> </ul> </div> <div class="nav-acdn-container"> <div class="mob-nav-btn">Webpages</div> <ul class="ul-reset"> <li class="nav-acdn-item"><a href="index.asp">Home</a></li> <li class="nav-acdn-item"><a href="about-us-1-w.asp">About Us</a></li> <li class="nav-acdn-item"><a href="about-me-4-w.asp">About Me</a></li> <li class="nav-acdn-item"><a href="courses-3-w.asp">Courses</a></li> <li class="nav-acdn-item"><a href="course-dates-21-w.asp">Course Dates</a></li> <li class="nav-acdn-item"><a href="contact-us-2-w.asp">Contact Us</a></li> </ul> </div> </div> </nav>

請注意，我刪除了示例中的一些li元素以使其更短，並且還包含了結尾處缺少的</ul>標記。