Удалите класс из других div по щелчку, а также найдите класс и переключите класс

Question

nav-link li -> - это родительский раскрывающийся список - это дочерний элемент. Мне нужно переключить дочерний элемент, щелкнув родительский элемент. Когда я нажимаю другой элемент (nav-link li), он отлично работает, удаляя имя класса открытым. когда я пытаюсь переключить тот же элемент, он не работает (nav-link li) и не переключается.

jQuery(".nav-link li").click(function() {
  $('.drop-down').not(this).removeClass('open');
  $('a').not(this).removeClass('mins');
  jQuery(this).find(".drop-down").toggleClass("open");
  jQuery(this).find("a").toggleClass("mins");
});

.nav-link .drop-down.open {
  max-height: 1000px;
}
.nav-link .drop-down {
  max-height: 0;
}
.nav-link .mob-menu-con .mins:after {
  content: "-";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav-link">
  <li class="mob-menu-con">
    <a class="" href="#">LANDWIRTSCHAFT</a>
    <img class="arrow-down" src="./assets/img/icons/assest-05.png">
    <div class="drop-down">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="menu-list">
            <p class="menu-title">Traktorzubehör</p>
            <ul>
              <li><a href="#">Bolzen</a></li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="menu-list">
            <p class="menu-title wd-space">Folien & Silieren</p>
            <ul>
              <li><a class="wd-space" href="#">Folien & Planen</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="mob-menu-con">
    <a href="#">TIERZUCHT</a>
    <img class="arrow-down" src="./assets/img/icons/assest-05.png">
    <div class="drop-down">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="menu-list">
            <p class="menu-title">Traktorzubehör</p>
            <ul>
              <li><a href="#">Bolzen</a></li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </li>
</ul>

Answer 1

Попробуйте добавить

overflow: hidden;

к

.nav-link .drop-down {
    max-height: 0;
    overflow: hidden;
}