Как оптимизировать Jquery код?

260

11 июня 2022, 19:30

Вот этот код спасибо!)

$(document).ready(function() {
  $('.icon1').click(function(e) {
    $('#sub_menu1').toggleClass('active');
    $('#sub_menu3').removeClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu7').removeClass('active');
  });
  $('.icon2').click(function(e) {
    $('#sub_menu2').toggleClass('active');
    $('#sub_menu1').removeClass('active');
    $('#sub_menu3').removeClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu6').removeClass('active');
    $('#sub_menu7').removeClass('active');
  });
  $('.icon3').click(function(e) {
    $('#sub_menu3').toggleClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu6').removeClass('active');
    $('#sub_menu7').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu1').removeClass('active');
  });
  $('.icon4').click(function(e) {
    $('#sub_menu4').toggleClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu6').removeClass('active');
    $('#sub_menu7').removeClass('active');
    $('#sub_menu1').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu3').removeClass('active');
  });
  $('.icon5').click(function(e) {
    $('#sub_menu5').toggleClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu6').removeClass('active');
    $('#sub_menu7').removeClass('active');
    $('#sub_menu1').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu3').removeClass('active');
  });
  $('.icon6').click(function(e) {
    $('#sub_menu6').toggleClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu7').removeClass('active');
    $('#sub_menu1').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu3').removeClass('active');
  });
  $('.icon7').click(function(e) {
    $('#sub_menu7').toggleClass('active');
    $('#sub_menu5').removeClass('active');
    $('#sub_menu4').removeClass('active');
    $('#sub_menu6').removeClass('active');
    $('#sub_menu1').removeClass('active');
    $('#sub_menu2').removeClass('active');
    $('#sub_menu3').removeClass('active');
  });
  $('.icon11').click(function(e) {
    $('#sub_menu11').toggleClass('active');
    $('#sub_menu33').removeClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu77').removeClass('active');
  });
  $('.icon22').click(function(e) {
    $('#sub_menu22').toggleClass('active');
    $('#sub_menu11').removeClass('active');
    $('#sub_menu33').removeClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu66').removeClass('active');
    $('#sub_menu77').removeClass('active');
  });
  $('.icon33').click(function(e) {
    $('#sub_menu33').toggleClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu66').removeClass('active');
    $('#sub_menu77').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu11').removeClass('active');
  });
  $('.icon44').click(function(e) {
    $('#sub_menu44').toggleClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu66').removeClass('active');
    $('#sub_menu77').removeClass('active');
    $('#sub_menu11').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu33').removeClass('active');
  });
  $('.icon55').click(function(e) {
    $('#sub_menu55').toggleClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu66').removeClass('active');
    $('#sub_menu77').removeClass('active');
    $('#sub_menu11').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu33').removeClass('active');
  });
  $('.icon66').click(function(e) {
    $('#sub_menu66').toggleClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu77').removeClass('active');
    $('#sub_menu11').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu33').removeClass('active');
  });
  $('.icon77').click(function(e) {
    $('#sub_menu77').toggleClass('active');
    $('#sub_menu55').removeClass('active');
    $('#sub_menu44').removeClass('active');
    $('#sub_menu66').removeClass('active');
    $('#sub_menu11').removeClass('active');
    $('#sub_menu22').removeClass('active');
    $('#sub_menu33').removeClass('active');
  });
  $(".btn_m").click(function(e) {
    $(".wrapper_mobile").toggleClass("active_m");
    $(".nav_mobile").toggleClass("active_m");
  });
  $('.wrapper_mobile').click(function(e) {
    $('.wrapper_mobile').removeClass('active_m');
    $('.nav_mobile').removeClass('active_m');
  });
});

body {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
ul {
  padding: 10px;
  margin: 0;
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
.nav {
  position: absolute;
  z-index: 20;
}
#icon {
  width: 15px;
  height: 15px;
  transform: translateX(33px);
  padding: 11.2px;
  cursor: pointer;
  background-color: rgba(255, 95, 95, 0.521);
}
#icon2 {
  width: 15px;
  height: 15px;
  transform: translateX(33px);
  padding: 11.2px;
  cursor: pointer;
  background-color: rgba(255, 95, 95, 0.521);
}
.sub_menu {
  width: 317px;
  height: 100%;
  background-color: rgb(230, 225, 225);
  border: 1px solid #fff;
  padding: 0;
  display: none;
}
.active {
  display: block;
}
.rotate {
  transform: rotate(-180deg);
}
#main_link {
  width: 240px;
  font-size: 16px;
  margin-left: 5px;
}
#link_wrapper {
  width: 317px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgba(238, 238, 238, 0.534);
  border: 1px solid #fff;
}
#link_wrapper:hover {
  background-color: rgb(216, 216, 216);
}
#sub_icon {
  width: 15px;
  height: 15px;
  transform: rotate(-90deg);
  margin-left: 5px;
}
#icon_m {
  width: 15px;
  height: 15px;
  transform: translateX(0px);
  padding: 11.2px;
  cursor: pointer;
}
#icon_m_2 {
  width: 10px;
  height: 10px;
  padding: 11.2px;
  transform: translateY(-0.5px);
}
#sub_link_wrapper {
  margin-left: 5px;
}
#sub_menu_link {
  display: flex;
  align-items: center;
  width: 310px;
  height: 40px;
}
.nav_mobile {
  width: 340px;
  height: 100%;
  background-color: #fff;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.wrapper_mobile {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
.link_mobile {
  width: 274px;
  height: 36px;
  margin-bottom: 3px;
  padding-top: 15px;
  padding-left: 10px;
}
.link_mobile:hover {
  background-color: rgba(0, 0, 0, 0.11);
}
.btn_m {
  width: 100px;
  height: 40px;
  outline: none;
  border: 1px solid rgb(226, 129, 17);
  background-color: #fff;
  border-radius: 100px;
  width: 100%;
}
.btn_wrapper {
  z-index: -3;
  margin-top: 20px;
  width: 97%;
  height: 50px;
  margin-left: 12px;
  margin-right: 12px;
  display: none;
}
.active_m {
  display: block;
}
#icon_mobile {
  width: 10px;
  height: 10px;
  padding: 0 5px;
}
@media screen and (max-width: 765px) {
  .nav {
    display: none;
  }
  .btn_wrapper {
    display: block;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="nav">
    <ul class="menu">
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon11" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu11">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon22" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu22">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src=".=/img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon33" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu33">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon44" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu44">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon55" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu55">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon66" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu66">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a><img id="icon" class="icon77" src="../menu_PC/img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu77">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a></div>
    </ul>
  </div>
  <div class="btn_wrapper">
    <button class="btn_m">Категории</button>
  </div>
  <div class="wrapper_mobile"></div>
  <div class="nav_mobile">
    <ul class="mobile_menu">
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon1" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu1">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon2" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu2">
          <li id="sub_menu_link"><img id="sub_icon" src=".img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src=".img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src=".img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src=".img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon3" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu3">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon4" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu4">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon5" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu5">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon6" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu6">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><img id="icon_m_2" class="icon1" src="./img/Ellipse 1.svg" alt=""><a id="main_link" href="#">Тестовое слово</a><img id="icon_m" class="icon7" src="./img/arrow.svg" alt=""></div>
        <ul class="sub_menu" id="sub_menu7">
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
          <li id="sub_menu_link"><img id="sub_icon" src="./img/arrow.svg" alt=""><a id="sub_link_wrapper" href="#">Тестовое слово2</a></li>
        </ul>
      </li>
      <li>
        <div id="link_wrapper"><a id="main_link" href="#">Тестовое слово</a></div>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="./js/script.js"></script>
</body>
</html>

Answer 1

Вот такой вариант.

$('.btn_m').on('click', function() { // При нажатии на кнопку "категории"..
  $('.wrapper_mobile, .nav_mobile') // ..мы выберем два элемента и..
    .addClass('active_m'); // ..добавим им класс active_m
});
$('.wrapper_mobile').on('click', function() { // При нажатии на wrapper_mobile..
  $('.wrapper_mobile, .nav_mobile') // ..так же возмём два элемента, но..
    .removeClass('active_m'); // ..удалим класс active_m
  
  // при закрытие закроем то что открыто, про запас..
  $('.nav_mobile') // ..возмём всё меню..
      .find('.sub_menu.active') // ..найдём там активный sub_menu.. 
      .removeClass('active'); // ..и удалим у него класс active.
});
$('.nav_mobile').on('click', '.icon_m', function() { // При нажатии на элемент с классом icon_m..
  let parent = $(this).closest('.sub_menu_drop'); // запишем в переменную элемент, который будет "выше" и будем иметь класс sub_menu_drop.
  if(parent.find('.sub_menu').lenght !== 0 // если среди дочерних элементов есть sub_menu и..
  && !parent.hasClass('active')) { // ..текущий parent не имеет класс active, то ..
    $('.nav_mobile') // ..возмём всё меню..
      .find('.sub_menu.active') // ..найдём там активный sub_menu.. 
      .removeClass('active'); // ..и удалим у него класс active.
    
    parent // так же возьмём parent..
      .find('.sub_menu') // ..найдём в нём sub_menu..
      .addClass('active'); // ..и дадим ему active
  }
});

body {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
ul {
  padding: 10px;
  margin: 0;
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
.nav {
  position: absolute;
  z-index: 20;
}
#icon {
  width: 15px;
  height: 15px;
  transform: translateX(33px);
  padding: 11.2px;
  cursor: pointer;
  background-color: rgba(255, 95, 95, 0.521);
}
#icon2 {
  width: 15px;
  height: 15px;
  transform: translateX(33px);
  padding: 11.2px;
  cursor: pointer;
  background-color: rgba(255, 95, 95, 0.521);
}
.sub_menu {
  width: 317px;
  height: 100%;
  background-color: rgb(230, 225, 225);
  border: 1px solid #fff;
  padding: 0;
  display: none;
}
.active {
  display: block;
}
.rotate {
  transform: rotate(-180deg);
}
#main_link {
  width: 240px;
  font-size: 16px;
  margin-left: 5px;
}
#link_wrapper {
  width: 317px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: rgba(238, 238, 238, 0.534);
  border: 1px solid #fff;
}
#link_wrapper:hover {
  background-color: rgb(216, 216, 216);
}
#sub_icon {
  width: 15px;
  height: 15px;
  transform: rotate(-90deg);
  margin-left: 5px;
}
#icon_m {
  width: 15px;
  height: 15px;
  transform: translateX(0px);
  padding: 11.2px;
  cursor: pointer;
}
#icon_m_2 {
  width: 10px;
  height: 10px;
  padding: 11.2px;
  transform: translateY(-0.5px);
}
#sub_link_wrapper {
  margin-left: 5px;
}
#sub_menu_link {
  display: flex;
  align-items: center;
  width: 310px;
  height: 40px;
}
.nav_mobile {
  width: 340px;
  height: 100%;
  background-color: #fff;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.wrapper_mobile {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
.link_mobile {
  width: 274px;
  height: 36px;
  margin-bottom: 3px;
  padding-top: 15px;
  padding-left: 10px;
}
.link_mobile:hover {
  background-color: rgba(0, 0, 0, 0.11);
}
.btn_m {
  width: 100px;
  height: 40px;
  outline: none;
  border: 1px solid rgb(226, 129, 17);
  background-color: #fff;
  border-radius: 100px;
  width: 100%;
}
.btn_wrapper {
  z-index: -3;
  margin-top: 20px;
  width: 97%;
  height: 50px;
  margin-left: 12px;
  margin-right: 12px;
  display: none;
}
.active_m {
  display: block;
}
#icon_mobile {
  width: 10px;
  height: 10px;
  padding: 0 5px;
}
@media screen and (max-width: 765px) {
  .nav {
    display: none;
  }
  .btn_wrapper {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn_wrapper">
  <button class="btn_m">Категории</button>
</div>
<div class="wrapper_mobile"></div>
<div class="nav_mobile">
  <ul class="mobile_menu">
    <li class="sub_menu_drop">
      <div class="link_wrapper">
        <img class="icon_m_2" src="./img/Ellipse 1.svg">
        <a class="main_link" href="#">Тестовое слово</a>
        <img class="icon_m" src="./img/arrow.svg">
      </div>
      <ul class="sub_menu">
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово1</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово1</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово1</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово1</a>
        </li>
      </ul>
    </li>
    <li class="sub_menu_drop">
      <div class="link_wrapper">
        <img class="icon_m_2" src="./img/Ellipse 1.svg">
        <a class="main_link" href="#">Тестовое слово</a>
        <img class="icon_m" src="./img/arrow.svg">
      </div>
      <ul class="sub_menu">
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово2</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово2</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово2</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово2</a>
        </li>
      </ul>
    </li>
    <li class="sub_menu_drop">
      <div class="link_wrapper">
        <img class="icon_m_2" src="./img/Ellipse 1.svg">
        <a class="main_link" href="#">Тестовое слово</a>
        <img class="icon_m" src="./img/arrow.svg">
      </div>
      <ul class="sub_menu">
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово3</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово3</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово3</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово3</a>
        </li>
      </ul>
    </li>
    <li class="sub_menu_drop">
      <div class="link_wrapper">
        <img class="icon_m_2" src="./img/Ellipse 1.svg">
        <a class="main_link" href="#">Тестовое слово</a>
        <img class="icon_m" src="./img/arrow.svg">
      </div>
      <ul class="sub_menu">
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово4</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово4</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово4</a>
        </li>
        <li class="sub_menu_link">
          <img class="sub_icon" src="./img/arrow.svg">
          <a class="sub_link_wrapper" href="#">Тестовое слово4</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как показать текст в зависимости от data в checkbox?Jquery

Подскажите, как при выбранном checkbox, скрывать/показывать ссылки вprice-problem, с привязкой?

282

Разные длины одинаковых строк в C# WinForms

Не всегда, но бывает такое, что длины не совпадают, хотя одна строка равна другойКак исправить?

322

Что мне нужно знать для запуска asp.net core application в wide web?

К примеру у меня есть простое aspnet core hello world приложение, я хочу уметь подключиться к нему через свой внешний ip и порт 80 из внешней сети (к примеру...

251

Каким аналогом ctrl + w вы пользуетесь в Visual Studio?

Долгое время я работал на IDE от JetBrainsЭто были PhpStorm, Rider и т

372