当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>标记。