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
  • да, погорячилась. Проверить все же придется, что клик на не активном элементе. Добавила в код.
    – Kjuri
    30 мар 2019 в 7:56
  • все равно не закрывается 30 мар 2019 в 8:02
  • Сделал, изменил твою запись. Спасибо большое за помощь)) 30 мар 2019 в 8:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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