0

Есть код который сворачивает / разворачивает карточки.

Пример работы кода можете посмотреть на сайте 2 блок где карта.

Как сделать чтобы при клике на другой плюсик уже открытые карточки закрывались?

$(".marker").click(function() {
  $(this).toggleClass("show"),
    $(this).find(".marker_info").toggleClass("show"),
    $(this).siblings().removeClass("show"),
    $(this).siblings().find(".marker_info").removeClass("show");
})
$(document).on("click", function(t) {
  $(t.target).closest(".marker").length || ($(".marker").removeClass("show"),
      $(".marker").find(".marker_info").removeClass("show")),
    t.stopPropagation();
})
.marker {
  position: absolute;
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease
}

.marker span {
  background-color: #51AB00;
  width: 16px;
  height: 16px;
  display: block;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: relative;
  z-index: 2;
  background-image: url(../images/marker.png);
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: 3px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: background-color .3s ease, -webkit-transform .3s ease;
  transition: background-color .3s ease, -webkit-transform .3s ease;
  -moz-transition: background-color .3s ease, transform .3s ease, -moz-transform .3s ease;
  transition: background-color .3s ease, transform .3s ease;
  transition: background-color .3s ease, transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.marker:after,
.marker:before {
  content: " ";
  position: absolute;
  background: rgba(255, 255, 255, 1);
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
  z-index: 1;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.marker:after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease
}

.marker:before {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease
}

.marker:hover:after {
  -webkit-transform: scale(6);
  -moz-transform: scale(6);
  -ms-transform: scale(6);
  transform: scale(6);
  opacity: .4;
  background: #fff;
}

.marker:hover:before {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 0.5;
  background: #fff;
}

.marker.show {
  z-index: 9;
}

.marker.show span {
  background-color: #fff;
  background-position: 5px 5px;
  color: #fff;
}

.marker.show:after,
.marker.show:before {
  background: rgba(255, 255, 255, 0.7)
}

.marker_info {
  position: absolute;
  top: 12px;
  left: 50%;
  margin-left: -130px;
  width: 360px;
  padding: 16px;
  -webkit-border-radius: 0;
  border-radius: 0;
  display: none;
  -webkit-box-shadow: 0px 12px 51px 0px rgba(0, 0, 0, 0.39);
  box-shadow: 0px 12px 51px 0px rgba(0, 0, 0, 0.39)
}

.marker_info p {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 5px;
}

.marker_info h6 {
  font-size: 16px;
  font-weight: 900;
  margin-top: 6px;
  margin-bottom: 6px;
}

.marker_info .card-body {
  padding: 0px;
}

.marker_info.show {
  display: block;
}

.section_border {
  background-color: #fff;
  border: 6px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
}

.marker.show span {
  background-color: #e72822;
  background-position: 3px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.map-marker h5 {
  position: absolute;
  font-size: 16px;
  font-weight: 300;
  text-align: right;
  right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="homepage_intro-hero">
  <div class="marker" style="top: 51%; left: 60%; opacity: 1;">
    <span></span>
    <div class="marker_info section_border">
      <div class="row">
        <div class="col-md-5">
          <img src="images/master1.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-7">
          <h6 class="marker_info-title">Алексей</h6>
          <p>Статус: <img src="images/cross1.png" alt=""> свободен<br> Опыт: более 5 лет<br>Средн. время прибытия: 56 минут
          </p>
          <div class="card-body"><a href="#vizovmastera" data-toggle="modal" class="card-link">Вам перезвонить?</a></div>

        </div>
      </div>
    </div>
  </div>
</div>

1 ответ 1

0

так, просто поудаляйте класс

$(".marker").removeClass("show");
$(".marker_info").removeClass("show");

В целом как-то так:

$(".marker").click(function() {
  if($(this).hasClass("show")) {
    $(".marker").removeClass("show");
    $(".marker_info").removeClass("show");
  }
  else {
    $(".marker").removeClass("show");
    $(".marker_info").removeClass("show");

    $(this).toggleClass("show"),
    $(this).find(".marker_info").toggleClass("show"),
    $(this).siblings().removeClass("show"),
    $(this).siblings().find(".marker_info").removeClass("show");
 }

})

4
  • теперь не закрывается по повторному нажатию на карточку 30 мар 2019 в 7:50
  • да, погорячилась. Проверить все же придется, что клик на не активном элементе. Добавила в код.
    – Arbery
    30 мар 2019 в 7:56
  • все равно не закрывается 30 мар 2019 в 8:02
  • Сделал, изменил твою запись. Спасибо большое за помощь)) 30 мар 2019 в 8:14

Ваш ответ

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

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