Добавление классов через jquery

Question

Подскажите, пожалуйста, как мне решить данную задачу.

Когда я нажимаю на has-submenu, у меня появляться блок как мне нужно с остальными ссылками. Но Остальные li .has-submenu должны получить display block. Если изменить остальные li на другой класс, то сама логика работает. Возможно ли при одинаковых классах одному добавлять has-submenu active_movil, а вот всем остальным has-submenu to-left? Надеюсь я правильно объяснил.

$(document).ready(function() {
  $('.has-submenu').click(function() {
    $(this).addClass('mobil_active');
    if ($('.has-submenu').hasClass('mobil_active')) {
      $('.has-submenu').addClass('to-left');
      $('.header-submenu').addClass('to-right');
    } else {
      $('.has-submenu').removeClass('to-left');
      $('.header-submenu').removeClass('to-right');
    }
  })
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*,
* :after,
* :before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-submenu {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.links {
  color: black;
  text-decoration: none;
}

.header-bottom-links-row>li.has-submenu>.ttl::after {
  content: "";
  width: 10px;
  height: 17px;
  background: url(mob-menu-arrow.svg) 0 0 no-repeat;
  position: absolute;
  right: 20px;
  margin-top: -16px;
}

.header-bottom-links-row>li .ttl:before {}

.ttl {
  margin-bottom: 10px;
}

.ttl>a {
  text-decoration: none;
}

.ttl>a::after {
  content: "";
  display: block;
  width: calc(100%);
  height: 1px;
  background: red;
  position: absolute;
  left: 0;
  margin: 3px;
}

.mobil_active {
  display: block;
}

ul.sub-submenu>li:after {
  content: "";
  display: block;
  width: calc(100%);
  height: 1px;
  background: red;
  position: absolute;
  left: 0;
  margin: 3px;
}

.to-left {
  display: none;
}

.header-submenu {
  display: none;
}

.to-right {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="header-bottom-links-row">
  <li class="has-submenu">
    <div class="ttl">
      <a href="#" class="border_bottom">О Мгике</a>
      <div class="dropdown_arrow"></div>
    </div>


    <div class="header-submenu">
      <div class="header-submenu-cont">
        <div class="header-submenu-1">
          <ul class="submenu-list">
            <li>
              <div class="ttl">
                <a href="#" class="border_bottom">Приветствие ректора</a>
              </div>
            </li>
            <li>
              <div class="ttl">
                <a href="#" class="border_bottom">История МГИКа</a>
              </div>
            </li>
            <li>
              <div class="ttl">
                <a href="#" class="border_bottom">Структура МГИКа</a>
              </div>
            </li>
            <li>
              <div class="ttl">
                <a href="#" class="border_bottom">Ученый совет</a>
              </div>
            </li>
            <li class="has-sub-submenu">
              <div class="ttl">
                <div class="submenu-arrow"></div>
                <a href="#" class="border_bottom">Сведенья об образовательной организации</a>
              </div>
              <div class="sub-submenu-expandable">
                <ul class="sub-submenu">
                  <a href="">
                    <li>Основные сведения</li>
                  </a>
                  <a href="">
                    <li class="text_delete">Структура и органы управления образовательной организацией
                    </li>
                  </a>
                  <a href="">
                    <li>Документы</li>
                  </a>
                  <a href="">
                    <li>Образование</li>
                  </a>
                  <a href="">
                    <li>Образовательные стандарты и требования</li>
                  </a>
                  <a href="">
                    <li>Руководство</li>
                  </a>
                  <a href="">
                    <li>Педагогический состав</li>
                  </a>
                  <a href="">
                    <li>Материально-техническое обеспечение и оснащенность образовательного процесса. Доступная среда
                    </li>
                  </a>
                  <a href="">
                    <li>Стипендии и меры поддержки обучающихся</li>
                  </a>
                  <a href="">
                    <li>Платные образовательные услуги</li>
                  </a>
                  <a href="">
                    <li>Финансово-хозяйственная деятельность</li>
                  </a>
                  <a href="">
                    <li>Вакантные места для приема (перевода) обучающихся</li>
                  </a>
                  <a href="">
                    <li>Международное сотрудничество</li>
                  </a>
                  <a href="">
                    <li>Организация питания в образовательной организации</li>
                  </a>
                </ul>
              </div>
            </li>


          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="has-submenu">
    <div class="ttl">
      <a href="#" class="border_bottom">Наука</a>
      <div class="dropdown_arrows"></div>
    </div>
  </li>
  <li class="has-submenu">
    <div class="ttl">
      <a href="#" class="border_bottom">Студентам</a>
      <div class="dropdown_arrow"></div>
    </div>
  </li>
  <li class="has-submenu">
    <div class="ttl">
      <a href="#" class="border_bottom">Поступающим</a>
      <div class="dropdown_arrow"></div>
    </div>
  </li>
  <li class="has-submenu">
    <div class="ttl">
      <a href="#" class="border_bottom">Издательство</a>
      <div class="dropdown_arrow"></div>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

Добавление классов через jquery

Ответы (0 шт):