PROSAGA码农传奇-jQuery-当1个抽屉打开时切换逻辑

<div class =“post-text”itemprop =“text”>
  <P>
    问题是因为您的逻辑检测到其中一个子菜单是否打开然后关闭它们，但只重置当前子菜单上的CSS样式。
  </p>
  <P>
    要解决这个问题，并改进逻辑，你可以切换一个类
     <code>
      .nav-acdn-container
    </code>
     元素并挂钩所有相关的CSS，如下所示：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          $(".nav-acdn-container .mob-nav-btn").click(function() {
  var $target = $(this).closest('.nav-acdn-container').toggleClass('open');
  $('.nav-acdn-container').not($target).removeClass('open');
});
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .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;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <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>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    请注意，我删除了一些
     <code>
      li
    </code>
     示例中的元素使其更短，并且还包括
     <code>
      </ul>
    </code>
     在最后附近丢失的标签。
  </p>
</DIV>