1

` помогите добить аккордеон. Реализация на mouseenter.

Суть задачи: 1)Ховер на название - открывается описание. 2)Ховер на другое название - открытое описание закрывается и открывается новое в соответствии с ховером. 3)Курсор уходит в сторону - описание остается открытым. 4)То есть описание реагирует на курсор. 5)Одно описание открыто всегда.

у меня ступор по реализации второго и пятого пункта.

if (document.readyState !== 'loading') {
  console.log("ready!");
  ready();
} else {
  document.addEventListener('DOMContentLoaded', ready);
}

function ready() {
  let accordion = document.querySelectorAll(".accordion-item-header");
  console.log(accordion);
  for (let i = 0; i < accordion.length; i++) {
    accordion[i].addEventListener('mouseenter', function() {
      accordionMouseenter(event);
    });
  }
}

let accordionMouseenter = (eventHappened) => {
  let targetEnterMouse = event.target;
  let classEnter = targetEnterMouse.classList;
  while ((classEnter[0] != "accordion-item-header")) {
    targetEnterMouse = targetEnterMouse.parentElement;
    classEnter = targetEnterMouse.classList;
  }
  let description = targetEnterMouse.nextElementSibling;
  if (description.style.maxHeight) {
    description.style.maxHeight = null;
  } else {
    let allDescriptions = document.querySelectorAll(".accordion-item-body-content");
    for (let i = 0; i < allDescriptions.length; i++) {
      if (allDescriptions[i].style.maxHeight) {
        console.log(allDescriptions[i].style.maxHeight);
        allDescriptions[i].style.maxHeight = null;
      }
    }
    description.style.maxHeight = description.scrollHeight + "px";

  }
}
.sell_accordion {
  padding: 20px 0 120px 20px;
  width: 75%;
}

.sell_accordion .accordion_content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sell_accordion .accordion_content .accordion {
  width: 100%;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-size: 48px;
  line-height: 59px;
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 0 0 50px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header:last-child {
  margin: 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header.active {
  border-bottom: 3px solid #FF6C00;
  margin: 0 0 15px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content {
  padding: 0 0 50px 0px;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: black;
  margin: 0 0 25px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content p:last-child {
  margin: 0;
}
<div class="sell_accordion">
  <div class="accordion_content">
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-item-header">
          Мы продаем
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aspernatur non voluptates adipisci sapiente architecto, quod temporibus blanditiis fugit praesentium.
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, aspernatur.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptates nisi, dolorem esse ut placeat autem dolorum, quia in beatae non praesentium enim quis et sunt aperiam cum eius voluptatem a voluptate optio quibusdam maiores? Amet corporis
              eos iusto error beatae similique molestias, reiciendis consequuntur, quae quaerat aspernatur sit qui.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Мы доставляем
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">

          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Аренда полей и предзаказ урожая
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi quae fuga cumque similique deserunt quisquam. Culpa accusantium eum animi et!
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Овощи и фрукты. Что-нибудь еще?
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Нужен представитель в Турции:
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Работа с контрагентами
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

`

1
  • @Roman Извиняюсь за наглость Можешь помочь с решением? 22 янв 2021 в 14:37

1 ответ 1

2

При каждом наведии мышки на элемент, нужно было скрывать все остальные элементы, вы просто обращались не к тем элементам.

Нужно было писать вот-так:

 let allDescriptions = document.querySelectorAll(".accordion-item-body");

вместо этого:

let allDescriptions = document.querySelectorAll(".accordion-item-body-content");

if (document.readyState !== 'loading') {
  console.log("ready!");
  ready();
} else {
  document.addEventListener('DOMContentLoaded', ready);
}

function ready() {
  let accordion = document.querySelectorAll(".accordion-item-header");

  for (let i = 0; i < accordion.length; i++) {
    accordion[i].addEventListener('mouseenter', function() {
      accordionMouseenter(event);
    });
  }
  
  let allDescriptions = document.querySelectorAll(".accordion-item-body");
  allDescriptions[0].style.maxHeight = allDescriptions[0].scrollHeight + "px";
}

let accordionMouseenter = (eventHappened) => {
  let allDescriptions = document.querySelectorAll(".accordion-item-body");

  for (let i = 0; i < allDescriptions.length; i++) {
    if (allDescriptions[i].style.maxHeight) {

      allDescriptions[i].style.maxHeight = null;
    }
  }
  let targetEnterMouse = event.target;
  let classEnter = targetEnterMouse.classList;
  while ((classEnter[0] != "accordion-item-header")) {
    targetEnterMouse = targetEnterMouse.parentElement;
    classEnter = targetEnterMouse.classList;
  }
  let description = targetEnterMouse.nextElementSibling;
  if (description.style.maxHeight) {
    description.style.maxHeight = null;
  } else {
    description.style.maxHeight = description.scrollHeight + "px";
  }
}
.sell_accordion {
  padding: 20px 0 120px 20px;
  width: 75%;
}

.sell_accordion .accordion_content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sell_accordion .accordion_content .accordion {
  width: 100%;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-size: 8px;
  line-height: 9px;
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin: 0 0 10px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header:last-child {
  margin: 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-header.active {
  border-bottom: 3px solid #FF6C00;
  margin: 0 0 15px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content {
  padding: 0 0 10px 0px;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content p {
  font-weight: 500;
  font-size: 8px;
  line-height: 12px;
  color: black;
  margin: 0 0 5px 0;
}

.sell_accordion .accordion_content .accordion .accordion-item .accordion-item-body .accordion-item-body-content p:last-child {
  margin: 0;
}
<div class="sell_accordion">
  <div class="accordion_content">
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-item-header">
          Мы продаем
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aspernatur non voluptates adipisci sapiente architecto, quod temporibus blanditiis fugit praesentium.
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, aspernatur.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptates nisi, dolorem esse ut placeat autem dolorum, quia in beatae non praesentium enim quis et sunt aperiam cum eius voluptatem a voluptate optio quibusdam maiores? Amet corporis
              eos iusto error beatae similique molestias, reiciendis consequuntur, quae quaerat aspernatur sit qui.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Мы доставляем
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">

          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Аренда полей и предзаказ урожая
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi quae fuga cumque similique deserunt quisquam. Culpa accusantium eum animi et!
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Овощи и фрукты. Что-нибудь еще?
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Нужен представитель в Турции:
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
            </p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item-header">
          Работа с контрагентами
        </div>
        <div class="accordion-item-body">
          <div class="accordion-item-body-content">
            <p>
              CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

5
  • как все просто оказалось, а я замудрил( Спасибо вам 22 янв 2021 в 15:21
  • @АртурКузьмич слева от ответа галочка и плюсик
    – 로마 인
    22 янв 2021 в 15:38
  • Не подскажешь как сделать что бы первый пункт с аккордена был открыт по умолчанию а потом закрывался при наведении на него или другие? 26 янв 2021 в 11:19
  • @АртурКузьмич let allDescriptions = document.querySelectorAll(".accordion-item-body");, allDescriptions[0].style.maxHeight = allDescriptions[0].scrollHeight + "px"; добавь в ready. Добавил в ответ этот код
    – 로마 인
    26 янв 2021 в 20:23
  • Спасиб огромное. К стати, добавляю доп обработчик на событие клик, точнее доп функцию, что бы на мобайле открывать, он срабатывает только со второго раза, не подскажешь почему так? Будто конфликт возникает какой то 28 янв 2021 в 8:06

Ваш ответ

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

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