0

Имеется меню для мобильной версии, которое содержит выпадающую ссылку "Услуги". Проблема в том, что для того, чтобы подменю выпало, нужно нажать на стрелку, которая находится справа от пункта "Услуги". Как сделать так, чтобы можно было открыть подменю не при нажатии на стрелку, а при нажатии на всю ссылку "Услуги", которая находится в теге li.

Прилагаю ссылку на CodePen. Спасибо.

html:

<header class="header">
   <div class="container-header">
      <div class="header__top">
         <div class="header__content">
            <div class="select-web">
               <button><img src="../img/header/top_arrow.svg" alt="arrow"></button>
               <span>Хирургический центр</span>
            </div>
            <div class="working__mode">
               <p>Ежедневно 9:00-20:00</p>
            </div>
            <div class="address__and__schedule">
               <a href="#" class="link__address">Адрес и график работы</a>
            </div>
         </div>
      </div>
      <hr class="hr__header">

      <div class="header__middle">
         <div class="header__content">
            <div class="logo__block">
               <a href="../index.php"><img src="../img/header/logo.svg" alt="logo" class="logo"></a>
            </div>
            <div class="search__block">
               <form action="#" method="POST" class="form__search">
                  <a href="#"><img src="../img/icons/search.svg" class="img-search" alt="search"></a>
                  <input type="text" name="search" placeholder="Поиск">
               </form>
            </div>
            <div class="phone__block">
               <a href="#">891236182</a>
            </div>
         </div>
      </div>
      <hr class="hr__header">
      <div class="main__menu">
         <div class="header__menu">
            <div class="header__burger">
               <span></span>
            </div>
            <div>

            </div>
            <div class="logo__media__version">
               <a href="../index.php"><img src="../img/header/logo-mobile.png" alt="logo"></a>
            </div>
            <div class="phone__header">
               <a href="tel:+73466290028"><img src="../img/icons/phone.png" alt="phone"></a>
            </div>
            <div class="search__media__version">
               <a href="#"><img src="../img/icons/search-header-media-version.png" alt="search"></a>
            </div>
            <nav class="menu">
               <ul class="menu__list">
                  <li><a href="../index.php" class="menu__link">Главная</a></li>
                  <li><a href="#" class="menu__link">О компании</a></li>
                  <li><a href="#" class="menu__link">Сотрудники</a></li>
                  <li>
                     <!-- <input type="checkbox" id="menu" name="toggle" class="toggleSubMenu" id="sub-m1"> -->
                     <a href="" class="menu__link">Услуги</a>
                     <!-- <label for="menu" class="toggleMenu"></label> -->
                     <span class="menu__arrow arrow"></span>
                     <ul class="sub-menu__list">
                        <li>
                           <a href="#" class="sub-menu__link">Выпадающая ссылка 1</a>
                           <span class="sub-menu__arrow arrow"></span>
                           <ul class="sub-sub-menu__list">
                              <li><a href="#" class="sub-sub-menu__link">Testing System</a>
                              </li>
                           </ul>
                        </li>
                        <li>
                           <a href="#" class="sub-menu__link">Выпадающая ссылка 2</a>
                        </li>
                        <li>
                           <a href="#" class="sub-menu__link">Выпадающая ссылка 3</a>
                        </li>
                        <li>
                           <a href="#" class="sub-menu__link">Выпадающая ссылка 4</a>
                        </li>
                     </ul>
                  </li>
                  <li><a href="#" class="menu__link">Цены</a></li>
                  <li><a href="#" class="menu__link">Отзывы</a></li>
                  <li><a href="../pages/contacts.php" class="menu__link">Контакты</a></li>
               </ul>
            </nav>
         </div>
      </div>
   </div>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

css:

* {
   padding: 0;
   margin: 0;
   border: 0;
}

*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

:focus,
:active {
   outline: none;
}

a:focus,
a:active {
   outline: none;
}

nav,
footer,
header,
aside {
   display: block;
}

html,
body {
   height: 100%;
   width: 100%;
   font-size: 100%;
   line-height: 1;
   font-size: 14px;
   -ms-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
   font-family: inherit;
}

input::-ms-clear {
   display: none;
}

button {
   cursor: pointer;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

a,
a:visited {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

ul li {
   list-style: none;
}

img {
   vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: inherit;
   font-weight: 300;
}


.container-header {
   max-width: 1440px;
   margin: 0 auto;
}

.header {
   background-color: #fff;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
   font-family: 'KievitMedium';
}

.hr__header {
   width: 100%;
   border: 0.017em solid #dbdbdb;
}

.menu [type="checkbox"],
.menu label {
   display: none;
}

.menu label.toggleSubMenu {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   cursor: pointer;
   display: block;
}

.phone__header {
   display: none;
}

.header__content {
   width: 100%;
   padding: 0 50px 0 50px;
   display: flex;
   align-items: center;
   height: 114px;
}

.header__top {
   height: 60px;
   display: flex;
   align-items: center;
}

button {
   background-color: initial;
}

.select-web {
   display: flex;
   align-items: center;
}

.select-web button {
   height: 10px;
}

.select-web span {
   margin-left: 7px;
   font-size: 16px;
   border-bottom: 1px dashed #EF7F1A;
   color: #333;
}

.working__mode {
   margin-left: auto;
   margin-right: 8.5%;
}

.working__mode {
   display: flex;
   align-items: center;
}

.working__mode p {
   font-size: 16px;
   color: #333;
   font-feature-settings: 'pnum' on, 'lnum' on;
}

.address__and__schedule {
   display: flex;
   align-items: center;
}

.address__and__schedule a {
   font-size: 18px;
   color: #702C23;
   border-bottom: 1px dashed #EF7F1A;
}

/* header middle */

.search__block {
   margin-left: auto;
   margin-right: 6.5%;
}

.search__block,
.logo__block {
   display: flex;
   align-items: center;
}

.search__block input {
   font-size: 17px;
   color: #333333;
   width: 300px;
   height: 40px;
   background-color: #fff;
   border: 1px solid #000;
   margin-left: 15px;
   padding-left: 10px;
}

.search__block input::placeholder {
   font-size: 17px;
   color: #333333;
}

.img-search {
   width: 23px;
   height: 23px;
}

.form__search {
   display: flex;
   align-items: center;
}

.phone__block a {
   color: #000;
   font-size: 26px;
   font-family: 'KievitBold';
   font-feature-settings: 'pnum' on, 'lnum' on;
}

.header__menu {
   height: 65px;
   display: flex;
   align-items: center;
   padding: 0 50px 0 50px;
   font-family: 'KievitRegular';
}

.menu li {
   position: relative;
}

.menu__list {
   display: flex;
   align-items: center;
}

.menu__list>li+li {
   margin-left: 25px;
}

.menu a.parent {
   margin: 0px 25px 0px 0px;
}

.menu__list li a {
   font-size: 20px;
   color: #0A0A0A;
}

.menu__list li a:hover {
   color: #EF7F1A;
}

.sub-menu__list {
   display: none;
   font-family: 'KievitRegular';
   position: absolute;
   min-width: 320px;
   z-index: 9999;
   left: 0;
   top: 15px;
   padding: 27px 0px;
}

.sub-menu__list>li {
   background-color: #fefefe;
   display: block;
   width: 100%;
}


.sub-menu__link {
   color: #0a0a0a;
   display: inline-block;
   padding: 15px 20px;
   border-bottom: 1px solid #f7f7f7;
   font-size: 18px;
   transition: 0.2s;
}

.sub-sub-menu__list {
   display: none;
   position: absolute;
   top: 0;
   left: 100%;
   min-width: 320px;
   padding: 0px 0px 0px 3px;
}

.sub-sub-menu__list>li {
   background-color: #fefefe;
}

.sub-sub-menu__link {
   color: #0a0a0a;
   display: inline-block;
   padding: 15px 20px;
   border-bottom: 1px solid #f7f7f7;
   font-size: 18px;
   transition: 0.2s;
}

.sub-menu__list li a {
   display: block;
}

.arrow {
   
   position: absolute;
   right: 0;
   top: 5px;
   width: 0;
   height: 0;
   border-top: 8px solid #0A0A0A;
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
}

.arrow.active {
   transform: rotate(-180deg);
}

.sub-menu__arrow.arrow {
   top: 17px;
   right: 10px;
   border-left: 8px solid #0A0A0A;
   border-right: none;
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;

}

body.mouse .menu__list>li:hover .sub-menu__list {
   display: block;
}

body.mouse .sub-menu__list>li:hover .sub-sub-menu__list {
   display: block;
}



.header__burger,
.search__media__version,
.logo__media__version {
   display: none;
}

/* media */

@media screen and (max-width: 10000px) {


   .header__middle,
   .header__top,
   .hr__header {
      display: none;
   }

   .header {
      position: fixed;
      width: 100%;
      z-index: 9999;
      top: 0;
      left: 0;
   }

   .header:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fefefe;
      z-index: 3;
   }

   .header__burger {
      display: block;
      position: relative;
      width: 30px;
      height: 20px;
      z-index: 3;
   }

   .header__menu {
      height: 60px;
      justify-content: space-between;
   }

   .header__burger:before,
   .header__burger:after {
      content: '';
      background-color: #757575;
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      transition: all 0.3s ease 0s;
   }

   .header__burger span {
      position: absolute;
      background-color: #757575;
      left: 0;
      width: 100%;
      height: 2px;
      top: 9px;
      transition: all 0.3s ease 0s;
   }

   .header__burger:before {
      top: 0;
   }

   .header__burger:after {
      bottom: 0;
   }

   .menu {
      position: fixed;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #e42945;
      padding: 70px 0px 0px 0px;
      transition: all 0.3s ease 0s;
      overflow: auto;
   }

   .menu.active {
      top: 0;
   }

   .menu__list {
      display: block;
      text-transform: uppercase;
      text-align: center;
   }

   .menu__list li a {
      display: block;
      color: #fff;
      border-bottom: 1px solid hsla(0, 0%, 100%, .1);
      padding: 0px 0px 10px 0px;
   }

   .sub-menu__list {
      padding: 0;
      width: 100%;
      position: initial;
   }

   .sub-menu__list.open {
      text-transform: none;
   }

   .sub-menu__list.open li a {
      color: #0A0A0A;
      border-bottom: 1px solid #f7f7f7;
   }

   .menu__list li a:hover {
      color: #fff;
   }

   .sub-menu__list.open li a:hover {
      color: #0A0A0A;
   }

   /* .menu a.parent {
      margin: 0;
   } */

   .menu__list>li+li {
      margin-left: 0;
   }

   .sub-menu__list li {
      padding: 15px 0 15px 0;
   }


   .sub-menu__list li:last-child {
      padding-bottom: 10px;
   }

   .menu__list>li {
      margin: 10px 0px 20px 0px;
   }

   .header__burger.active span {
      transform: scale(0);
   }

   .header__burger.active:before {
      transform: rotate(45deg);
      top: 9px;
   }

   .header__burger.active:after {
      transform: rotate(-45deg);
      bottom: 9px;
   }

   .main-slider {
      margin-top: 68px;
   }

   .phone__header,
   .search__media__version,
   .logo__media__version {
      display: block;
      z-index: 3;
   }

   .logo__media__version img {
      height: 55px;
   }

   .arrow {
      border-top: 8px solid #fff;
      right: 40%;
   }

   .sub-menu__arrow.arrow {
      top: 7px;
   }

   .sub-menu__arrow.arrow {
      top: 19px;
      right: 35%;
   }

   .sub-sub-menu__list {
      position: inherit;
      top: 0;
      width: 100%;
      left: 0;
      min-width: 100%;
      padding: 0;
   }

   .sub-sub-menu__list>li {
      background-color: #fff;
   }
  
  .sub-menu__list.open {display: block;}

}

@media screen and (max-width: 800px) {
   .arrow {
      right: 38%;
   }

   .sub-menu__arrow.arrow {
      right: 32%;
   }
}

@media screen and (max-width: 670px) {
   .arrow {
      right: 37%;
   }

   .sub-menu__arrow.arrow {
      right: 29%;
   }
}

@media screen and (max-width: 580px) {
   .arrow {
      right: 35%;
   }

   .sub-menu__arrow.arrow {
      right: 26%;
   }
}

@media screen and (max-width: 500px) {
   .arrow {
      right: 33%;
   }

   .sub-menu__arrow.arrow {
      right: 23%;
   }
}

@media screen and (max-width: 450px) {
   .arrow {
      right: 31%;
   }

   .sub-menu__arrow.arrow {
      right: 20%;
   }
}

@media screen and (max-width: 400px) {
   .arrow {
      right: 28%;
   }

   .sub-menu__arrow.arrow {
      right: 17%;
   }
}


@media screen and (max-width: 365px) {
   .arrow {
      right: 25%;
   }

   .sub-menu__arrow.arrow {
      right: 14%;
   }
}

@media screen and (max-width: 320px) {

   .sub-menu__arrow.arrow {
      right: 9%;
   }
}

js:

$(document).ready(function () {
   $('.header__burger').click(function (event) {
      $('.header__burger, .header__menu, .menu').toggleClass('active');
      $('body').toggleClass('lock');
   });
});




let body = document.querySelector('body');


   body.classList.add('touch');
   let arrow = document.querySelectorAll('.arrow');

   for (i = 0; i < arrow.length; i++) {
      let thisLink = arrow[i].previousElementSibling;
      let subMenu = arrow[i].nextElementSibling;
      let thisArrow = arrow[i];

      thisLink.classList.add('parent');
      arrow[i].addEventListener('click', function () {
         subMenu.classList.toggle('open');
         thisArrow.classList.toggle('active');
      });
   }

https://codepen.io/Vladislav_Biryukov/pen/oNEpRzZ
2
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 27 мая 2022 в 22:43
  • Спасибо. Исправил 27 мая 2022 в 22:47

1 ответ 1

0

В этой строчке

arrow[i].addEventListener('click', ...)

необходимо поменять arrow[i] на thisLink. Чтобы событие по клику назначалось на ссылку.

И добавьте # в href ссылки

<a href="#" class="menu__link">Услуги</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.