0

Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!

$('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});
.div{
  border: 1px solid #3A444E;
  border-radius: 10px;
  width: 300px;
  height: 64px;
  overflow: hidden;
}

.div.open {
  height: auto;
  background: #000;
  color: #fff;
}

.window-one {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  margin-bottom: 20px;
}

.arrow-test {
  content: '';
  background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.arrow-test.open {
  content: '';
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%;
  width: 30px;  
  height: 30px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 1
      </h3>
      <div class="arrow-test"></div>
    </div>
    <div class="window-two">
      <div class="text">Текст 1</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 2
      </h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 2</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">
        Заголовок 3
      </h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 3</div>
    </div>
  </div>
</div>

2 ответа 2

0

Вместо того, чтобы вешать класс ещё и на .arrow, лучше изменять стили .arrow при наличии .div.open.

$('.div').on('click', function() {
  $(this).toggleClass('open');
});
.div{
  border: 1px solid #3A444E;
  border-radius: 10px;
  width: 300px;
  height: 64px;
  overflow: hidden;
}

.div.open {
  height: auto;
  background: #000;
  color: #fff;
}

.window-one {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  margin-bottom: 20px;
}

.arrow-test {
  content: '';
  background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.div.open .arrow-test {
  content: '';
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%;
  width: 30px;  
  height: 30px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">Заголовок 1</h3>
      <div class="arrow-test"></div>
    </div>
    <div class="window-two">
      <div class="text">Текст 1</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">Заголовок 2</h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 2</div>
    </div>
  </div>
</div>
<div class="wrapper-div">
  <div class="div">
    <div class="window-one">
      <h3 class="title">Заголовок 3</h3>
      <div class="arrow-test"></div>
    </div>
     <div class="window-two">
      <div class="text">Текст 3</div>
    </div>
  </div>
</div>

0

Переписал на нативный js. Логика предельно проста: получаем в первую константу псевдомассив ваших блоков и во вторую константу псевдомассив их стрелок. Перебираем массив с блоками методом forEach и каждому элементу вешаем обработчик события клик, при котором тоглим класс блоку. После этого берем массив стрелок и по индексу(индексу элемента массива с блоками) ему так же тоглим этот класс. Всё

const divs = document.querySelectorAll('.div');
const arrows = document.querySelectorAll('.arrow-test');

divs.forEach((item, i) => {
   item.addEventListener('click', () => {
      item.classList.toggle('open');
      arrows[i].classList.toggle('open');
   })
})

3
  • А можете подсказать, пожалуйста, как это должно выглядеть, я просто в этом деле новичок, плохо js знаю:)
    – IsayR
    3 мая 2022 в 7:48
  • Плохо js знаете и пишите зачем то на jquery ? 3 мая 2022 в 8:10
  • Двойная работа, лучше в зависимости от родительского блока изменять стрелочку, как по мне. 3 мая 2022 в 10:19

Ваш ответ

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

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