open children and close other children in multi-level navigation-CodePudding

I am working on a navigation and now managed to open up deeper levels of a certain parent one by one on click but I have a hard time trying to figure out how to close all others when going into a another direction.

Let's say you have A1, A2A, A3A and A4A open and you click on B1, then I want A1A, A2A and A3A to close. But it also needs to work midway: let's say you have A1, A2A, A3A and A4A open but you click on A2B then A3A and A4A need to close.

$('li.has-children').click(function(){

        $(this).children('.wrap').addClass('active');
        
    });

.wrap {
  display:none;
}

.active {
  display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li >
    <a >link A1</a>
    <div >
    <ul>
      <li >
        <a >link A2A</a>
        <div >
        <ul>
          <li >
            <a >link A3A</a>
            <div >
              <ul>
                <li >
                  <a >link A4A</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        </div>
      </li>
      <li >
        <a >link A2B</a>
        <div >
        <ul>
          <li >
            <a >link A2B</a>
            <div >
              <ul>
                <li >
                  <a >link A3B</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        </div>
      </li>
    </ul>
    </div>
  </li>
  <li >
    <a >link B1</a>
    <div >
    <ul>
      <li >
        <a >link B2A</a>
        <div >
        <ul>
          <li >
            <a >link B3A</a>
            <div >
              <ul>
                <li >
                  <a >link B4A</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        </div>
      </li>
      <li >
        <a >link B2B</a>
        <div >
        <ul>
          <li >
            <a >link B3B</a>
            <div >
              <ul>
                <li >
                  <a >link B4B</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        </div>
      </li>
    </ul>
    </div>
  </li>
</ul>

CodePudding user response：

You just need the additional rule to remove the active class using closest and not(this)

$(this).closest('ul').children('li').not(this).children('.wrap').removeClass('active');

$('li.has-children').click(function() {
  $(this).children('.wrap').addClass('active');
  $(this).closest('ul').children('li').not(this).children('.wrap').removeClass('active');
});

.wrap {
  display: none;
}

.active {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li >
    <a >link A1</a>
    <div >
      <ul>
        <li >
          <a >link A2A</a>
          <div >
            <ul>
              <li >
                <a >link A3A</a>
                <div >
                  <ul>
                    <li >
                      <a >link A4A</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li >
          <a >link A2B</a>
          <div >
            <ul>
              <li >
                <a >link A2B</a>
                <div >
                  <ul>
                    <li >
                      <a >link A3B</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li >
    <a >link B1</a>
    <div >
      <ul>
        <li >
          <a >link B2A</a>
          <div >
            <ul>
              <li >
                <a >link B3A</a>
                <div >
                  <ul>
                    <li >
                      <a >link B4A</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li >
          <a >link B2B</a>
          <div >
            <ul>
              <li >
                <a >link B3B</a>
                <div >
                  <ul>
                    <li >
                      <a >link B4B</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>