0

Друзья, как сделать чтоб при клике на блок нажималась так же и кнопка, которая находится в этом блоке?

Прилагаю пример. Есть блок, по клику на сам блок должен вылазить блок, а пока что работает если кликнуть на саму кнопку (три точки внизу).

var show_filter_list = function(obj) {
  obj.classList.toggle("active");
  console.log(obj.nextElementSibling)


  panel = obj.nextElementSibling;
  panel.classList.toggle("opened");
}

var show_advances = function(obj) {
  obj.classList.toggle("active");

  panel = obj.previousElementSibling;
  panel.classList.toggle("opened");
}
.credit {
  border: 1px solid #d8d8d8;
  max-width: 922px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  position: relative;
}

.credit-wrap {
  padding: 30px 0 30px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.credit:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;
}

.credit__title {
  color: #2c7bdd;
  font-weight: 700;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 38px;
}

.credit__num {
  font-size: 16px;
  margin-bottom: 5px;
}

.credit__name {
  color: #9c9898;
  font-size: 12px;
}

.credit__more-btn {
  border-radius: 6px;
  background: #0e86d6;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border: 0;
  transition: all .2s;
  text-decoration: none;
  font-weight: 400;
  padding: 10px 30px;
}

.credit__num--fw {
  font-weight: bold;
}

.credit-time,
.credit-pcent {
  margin-top: 40px;
}

.credit-advances {
  margin-left: 40px;
  padding-left: 60px;
  padding-right: 30px;
  border-top: 1px solid #d8d8d8;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.credit-advances__list {
  list-style: none;
  margin: 0;
}

.credit__list-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.credit-toggle {
  position: absolute;
  left: 50%;
  background: #ddd;
  bottom: 0;
  width: 45px;
  height: 12px;
  margin-left: -22.5px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 8px;
  cursor: pointer;
  transition: background .2s;
}

.credit:hover .credit-toggle {
  background: #0e86d6;
}

.credit-toggle--circle {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-advances {
  display: none;
}

.credit-advances.opened {
  display: block;
}
<div class="credit">
  <div class="credit-wrap">
    <div class="credit__logo">
      <img src="img/credit-logo.png" alt="" width="112px">
    </div>
    <div class="credit__sum">
      <p class="credit__title">CreditStar</p>
      <p class="credit__num">30 000 ₽</p>
      <span class="credit__name">Сумма</span>
    </div>
    <div class="credit-time">
      <p class="credit__num">15 минут</p>
      <span class="credit__name">Время</span>
    </div>
    <div class="credit-pcent">
      <p class="credit__num credit__num--fw">1.5% в день</p>
      <span class="credit__name">Процент</span>
    </div>
    <a href="#" class="credit__more-btn">Подробнее</a>
  </div>

  <div class="credit-advances">
    <ul class="credit-advances__list">
      <li class="credit__list-item">Сумма займа от 1 000 до 30 000 рублей</li>
      <li class="credit__list-item">Срок от 7 до 30 дней</li>
      <li class="credit__list-item">Процентная ставка 1.5% в день</li>
      <li class="credit__list-item">Выдача на банковкую карту</li>
      <li class="credit__list-item">Нужен только паспорт</li>
      <li class="credit__list-item">Гражданам РФ с 18 лет</li>
    </ul>
  </div>

  <div class="credit-toggle" onclick="show_advances(this)">
    <div class="credit-toggle--circle"></div>
  </div>
</div>

1

3 ответа 3

0

event.stopImmediatePropagation();

const creditToggle = document.querySelector('.credit-toggle');

var show_filter_list = function(obj) {
  obj.classList.toggle("active");
  console.log(obj.nextElementSibling)


  panel = obj.nextElementSibling;
  panel.classList.toggle("opened");
}

var show_advances = function() {
  event.stopImmediatePropagation();
  creditToggle.classList.toggle("active");

  panel = creditToggle.previousElementSibling;
  panel.classList.toggle("opened");
}
.credit {
  border: 1px solid #d8d8d8;
  max-width: 922px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  position: relative;
}

.credit-wrap {
  padding: 30px 0 30px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.credit:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;
}

.credit__title {
  color: #2c7bdd;
  font-weight: 700;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 38px;
}

.credit__num {
  font-size: 16px;
  margin-bottom: 5px;
}

.credit__name {
  color: #9c9898;
  font-size: 12px;
}

.credit__more-btn {
  border-radius: 6px;
  background: #0e86d6;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border: 0;
  transition: all .2s;
  text-decoration: none;
  font-weight: 400;
  padding: 10px 30px;
}

.credit__num--fw {
  font-weight: bold;
}

.credit-time,
.credit-pcent {
  margin-top: 40px;
}

.credit-advances {
  margin-left: 40px;
  padding-left: 60px;
  padding-right: 30px;
  border-top: 1px solid #d8d8d8;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.credit-advances__list {
  list-style: none;
  margin: 0;
}

.credit__list-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.credit-toggle {
  position: absolute;
  left: 50%;
  background: #ddd;
  bottom: 0;
  width: 45px;
  height: 12px;
  margin-left: -22.5px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 8px;
  cursor: pointer;
  transition: background .2s;
}

.credit:hover .credit-toggle {
  background: #0e86d6;
}

.credit-toggle--circle {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-advances {
  display: none;
}

.credit-advances.opened {
  display: block;
}
<div class="credit" onclick="show_advances()">
  <div class="credit-wrap">
    <div class="credit__logo">
      <img src="img/credit-logo.png" alt="" width="112px">
    </div>
    <div class="credit__sum">
      <p class="credit__title">CreditStar</p>
      <p class="credit__num">30 000 ₽</p>
      <span class="credit__name">Сумма</span>
    </div>
    <div class="credit-time">
      <p class="credit__num">15 минут</p>
      <span class="credit__name">Время</span>
    </div>
    <div class="credit-pcent">
      <p class="credit__num credit__num--fw">1.5% в день</p>
      <span class="credit__name">Процент</span>
    </div>
    <a href="#" class="credit__more-btn">Подробнее</a>
  </div>

  <div class="credit-advances">
    <ul class="credit-advances__list">
      <li class="credit__list-item">Сумма займа от 1 000 до 30 000 рублей</li>
      <li class="credit__list-item">Срок от 7 до 30 дней</li>
      <li class="credit__list-item">Процентная ставка 1.5% в день</li>
      <li class="credit__list-item">Выдача на банковкую карту</li>
      <li class="credit__list-item">Нужен только паспорт</li>
      <li class="credit__list-item">Гражданам РФ с 18 лет</li>
    </ul>
  </div>

  <div class="credit-toggle" onclick="show_advances()">
    <div class="credit-toggle--circle"></div>
  </div>
</div>

2
  • область таргета у кнопки внизу поломалась, работает через раз и помоему постоянно в рандомной области.
    – De.Minov
    4 апр 2019 в 11:58
  • 1
    @CbIPoK2513, уже вижу что что-то не то...
    – Air
    4 апр 2019 в 12:15
0

var show_filter_list = function(obj) {
  obj.classList.toggle("active");
  console.log(obj.nextElementSibling)


  panel = obj.nextElementSibling;
  panel.classList.toggle("opened");
}

var show_b = function(obj) {
  obj.classList.toggle("active");

  panel = obj.previousElementSibling;
  panel.classList.toggle("opened");
}

var show_a = function(obj) {
  obj.classList.toggle("active");

  panel = obj.nextElementSibling;
  panel.classList.toggle("opened");
}
.credit {
  border: 1px solid #d8d8d8;
  max-width: 922px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  position: relative;
}

.credit-wrap {
  padding: 30px 0 30px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.credit:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;
}

.credit__title {
  color: #2c7bdd;
  font-weight: 700;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 38px;
}

.credit__num {
  font-size: 16px;
  margin-bottom: 5px;
}

.credit__name {
  color: #9c9898;
  font-size: 12px;
}

.credit__more-btn {
  border-radius: 6px;
  background: #0e86d6;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border: 0;
  transition: all .2s;
  text-decoration: none;
  font-weight: 400;
  padding: 10px 30px;
}

.credit__num--fw {
  font-weight: bold;
}

.credit-time,
.credit-pcent {
  margin-top: 40px;
}

.credit-advances {
  margin-left: 40px;
  padding-left: 60px;
  padding-right: 30px;
  border-top: 1px solid #d8d8d8;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.credit-advances__list {
  list-style: none;
  margin: 0;
}

.credit__list-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.credit-toggle {
  position: absolute;
  left: 50%;
  background: #ddd;
  bottom: 0;
  width: 45px;
  height: 12px;
  margin-left: -22.5px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 8px;
  cursor: pointer;
  transition: background .2s;
}

.credit:hover .credit-toggle {
  background: #0e86d6;
}

.credit-toggle--circle {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-advances {
  display: none;
}

.credit-advances.opened {
  display: block;
}
<div class="credit">
  <div class="credit-wrap" onclick="show_a(this)">
    <div class="credit__logo">
      <img src="img/credit-logo.png" alt="" width="112px">
    </div>
    <div class="credit__sum">
      <p class="credit__title">CreditStar</p>
      <p class="credit__num">30 000 ₽</p>
      <span class="credit__name">Сумма</span>
    </div>
    <div class="credit-time">
      <p class="credit__num">15 минут</p>
      <span class="credit__name">Время</span>
    </div>
    <div class="credit-pcent">
      <p class="credit__num credit__num--fw">1.5% в день</p>
      <span class="credit__name">Процент</span>
    </div>
    <a href="#" class="credit__more-btn">Подробнее</a>
  </div>

  <div class="credit-advances">
    <ul class="credit-advances__list">
      <li class="credit__list-item">Сумма займа от 1 000 до 30 000 рублей</li>
      <li class="credit__list-item">Срок от 7 до 30 дней</li>
      <li class="credit__list-item">Процентная ставка 1.5% в день</li>
      <li class="credit__list-item">Выдача на банковкую карту</li>
      <li class="credit__list-item">Нужен только паспорт</li>
      <li class="credit__list-item">Гражданам РФ с 18 лет</li>
    </ul>
  </div>

  <div class="credit-toggle" onclick="show_b(this)">
    <div class="credit-toggle--circle"></div>
  </div>
</div>

0

Решение с toggle с использованием jq:

$(function(){
  $('.credit').on('click', function(event){
    event.preventDefault();
    $(this).toggleClass('active');
  });
});
.credit.active .credit-advances {
    display: block;
}


.credit {
  border: 1px solid #d8d8d8;
  max-width: 922px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  position: relative;
}

.credit-wrap {
  padding: 30px 0 30px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.credit:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;
}

.credit__title {
  color: #2c7bdd;
  font-weight: 700;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 38px;
}

.credit__num {
  font-size: 16px;
  margin-bottom: 5px;
}

.credit__name {
  color: #9c9898;
  font-size: 12px;
}

.credit__more-btn {
  border-radius: 6px;
  background: #0e86d6;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border: 0;
  transition: all .2s;
  text-decoration: none;
  font-weight: 400;
  padding: 10px 30px;
}

.credit__num--fw {
  font-weight: bold;
}

.credit-time,
.credit-pcent {
  margin-top: 40px;
}

.credit-advances {
  margin-left: 40px;
  padding-left: 60px;
  padding-right: 30px;
  border-top: 1px solid #d8d8d8;
  margin-top: 20px;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.credit-advances__list {
  list-style: none;
  margin: 0;
}

.credit__list-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.credit-toggle {
  position: absolute;
  left: 50%;
  background: #ddd;
  bottom: 0;
  width: 45px;
  height: 12px;
  margin-left: -22.5px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  line-height: 8px;
  cursor: pointer;
  transition: background .2s;
}

.credit:hover .credit-toggle {
  background: #0e86d6;
}

.credit-toggle--circle {
  position: relative;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-toggle--circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transition: background .2s;
}

.credit-advances {
  display: none;
}

.credit-advances.opened {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="credit">
  <div class="credit-wrap">
    <div class="credit__logo">
      <img src="img/credit-logo.png" alt="" width="112px">
    </div>
    <div class="credit__sum">
      <p class="credit__title">CreditStar</p>
      <p class="credit__num">30 000 ₽</p>
      <span class="credit__name">Сумма</span>
    </div>
    <div class="credit-time">
      <p class="credit__num">15 минут</p>
      <span class="credit__name">Время</span>
    </div>
    <div class="credit-pcent">
      <p class="credit__num credit__num--fw">1.5% в день</p>
      <span class="credit__name">Процент</span>
    </div>
    <a href="#" class="credit__more-btn">Подробнее</a>
  </div>

  <div class="credit-advances">
    <ul class="credit-advances__list">
      <li class="credit__list-item">Сумма займа от 1 000 до 30 000 рублей</li>
      <li class="credit__list-item">Срок от 7 до 30 дней</li>
      <li class="credit__list-item">Процентная ставка 1.5% в день</li>
      <li class="credit__list-item">Выдача на банковкую карту</li>
      <li class="credit__list-item">Нужен только паспорт</li>
      <li class="credit__list-item">Гражданам РФ с 18 лет</li>
    </ul>
  </div>

  <div class="credit-toggle">
    <div class="credit-toggle--circle"></div>
  </div>
</div>

Ваш ответ

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

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