Логика переключения, когда 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>, который отсутствовал в конце.