1

Есть 3 столбца с текстовой информацией по мероприятию равной высоты в исходном состоянии независимо от количества контента в них.

Этого добился с помощью набора правил:

display: flex; flex-direction: column; align-items: stretch;

Далее, каждый список может раскрываться по кнопке подробнее и сворачиваться по крестику, при этом сохраняя исходную высоту других столбцов.

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

Обращаю ваше внимание, что сам функционал того, что хочу видеть уже реализован, но в некоторый момент, если поиграться с повторным открытием-закрытием списков, выпадающий список теперь фактически становится абсолютно спозиционированным, как select и теперь налазит на или под нижний блок, из-за того, что в родительском элементе отчего-то не удаляются инлайн стили высоты

Вот код в фидл

var mh = 0;
$(".task-box").each(function() {
  var h_block = parseInt($(this).height());
  if (h_block > mh) {
    mh = h_block;
  };
});

$(".task-box-inner a[aria-expanded='false']").click(function() {
  var box = $(".task-box-inner a[aria-expanded='false']").not(this).parents(".task-box");
  box.each(function() {
    $(this).height(mh);
  });
});
$(".card-body a[aria-expanded='true']").click(function() {
  var closebox = $(".card-body a[aria-expanded='true']").parents(".task-box");
  closebox.each(function() {
    $(this).removeAttr("style");
  });
});
#task .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#task .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 20px;
}

.task-box {
  position: relative;
  margin: 0 auto;
  color: rgb(95, 112, 135);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border: 1px solid #000;
}

.task-box .task-box-inner>a[aria-expanded="true"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="task">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <div class="task-box-inner">
          <h4>Lorem ipsum dolor sit amet</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
          <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-1">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-2">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
              <p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-3.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Modi, nam maxime aspernatur necessitatibus.</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem
            ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-3">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Хочу уточнить, а то вопрос не пойму. Вам нужно что бы 3 этих блока были одной высоты, после открытия доп. блока все блоки в строке оставались равными по высоте(увеличивались), а блоки ниже смещались. После закрытия все возвращалось в исходное положение?
    – E_K
    31 июл 2018 в 20:09
  • @E_K нет, не так - в вашем варианте эффекта можно добиться с помощью простого shrinka. В моем примере все и реализовано так, как этого и хочу (блок с раскрытие списка увеличивается, остальные блоки остаются равной высоты), но у меня это отрабатывает только 1 раз для каждого блока, т.е. если вы поиграетесь на примере с повторным раскрытием-закрытием блоков, то заметите, что блок теперь стал раскрываться как select, т.е. у раскрытого списка теперь абсолютное позиционирование, он налазит на нижний блок и закрывает часть инфы- такого быть не должно
    – Вася
    1 авг 2018 в 7:02

3 ответа 3

4
+50

Если я правильно понял ваш вопрос. Вот вариант

UPD2. Обновил сниппет и codepen

var maxHeight = 0;

$(".task-box").each(function() {
  var currentBlockHeight = parseInt($(this).outerHeight(false)); // Высота с учетом padding
  if (currentBlockHeight > maxHeight) {
    maxHeight = currentBlockHeight + 2; // добавляем тощину border
  }
});


$(".collapse").on("show.bs.collapse", function() {

  let boxes = $(".task-box").not($(this).parents(".task-box"));

  let parentBox = $(this).parents(".task-box"); // родительский блок

  parentBox.attr("aria-expanded", "true").css("height", "auto"); // добавляем аттрибут для отслеживания состояния и высоту для активного блока

  boxes.each(function() {
    if ($(this).attr("aria-expanded") !== "true") {
      // если блок не открыт (false) добавляем ему фиксированую высоту
      $(this).css("height", maxHeight);
    }
  });

});

$(".collapse").on('hide.bs.collapse', function() {
  let parentBox = $(this).parents(".task-box");
  parentBox.attr("aria-expanded", "false").css("height", maxHeight);
});
.row-container {
  width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.row__item {
  flex: 1 1 30%;
  margin-bottom: 20px;
}

.row__item:not(:nth-child(3n)) {
  margin-right: 20px;
}

.task-box {
  position: relative;
  padding: 15px;
  color: #5f7087;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
}

.banner {
  flex-basis: 100%;
  height: 300px;
  background-color: lightcoral;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row-container row">
  <div class="row__item">
    <div class="task-box" aria-expanded="false">
      <div class="task-box-inner">
        <h4>Lorem ipsum dolor sit amet</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
        <a class="js-show" data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
        <div class="collapse" id="collapseevent-1">
          <div class="card card-body">
            <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
            <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
            <a class="join" href="#">Присоединиться</a>
            <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row__item">
    <div class="task-box" aria-expanded="false">
      <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
      <div class="task-box-inner">
        <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        <a class="js-show" data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
        <div class="collapse" id="collapseevent-2">
          <div class="card card-body">
            <p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
            <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
            <p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
            <a class="join" href="#">Присоединиться</a>
            <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row__item">
    <div class="task-box" aria-expanded="false">
      <img class="img-fluid" src="img/event-3.jpg" alt="reportage">
      <div class="task-box-inner">
        <h4>Modi, nam maxime aspernatur necessitatibus.</h4>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem
          ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a class="js-show" data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
              Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
            </a>
        <div class="collapse" id="collapseevent-3">
          <div class="card card-body">
            <p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
            <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
            <a class="join" href="#">Присоединиться</a>
            <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis doloremque, quibusdam nostrum placeat nulla tenetur? Accusamus quam magnam quae veniam quo maxime vero, reprehenderit enim iste, similique ipsa nihil et.
  </div>
</div>

8
  • в вопросе внес дополнительное пояснение - надеюсь, сейчас все будет понятнее
    – Вася
    1 авг 2018 в 7:07
  • @Вася, обновил сниппет, данный результат был нужен?
    – E_K
    1 авг 2018 в 9:12
  • ну как сказать.. работает с глюками, как и у меня, что здесь, что в фидле.. cdn1.savepice.ru/uploads/2018/8/1/… к сожалению, совсем некорректно работает и в том же codepaine cdn1.savepice.ru/uploads/2018/8/1/…
    – Вася
    1 авг 2018 в 9:23
  • @Вася, вы пример на codepen смотрели, там нет бага когда блок выпадает за пределы родительского. Остался небольшой баг с высотой который пытаюсь устранить.
    – E_K
    1 авг 2018 в 9:26
  • 1
    @Вася, здесь уже спортивный интерес появился. Нужно правильно написать скрипт. Думаю в ближайшие пару часов, если будет время сделаю и обновлю ответ.
    – E_K
    1 авг 2018 в 9:40
1

Вариантов несколько:

  1. Отказаться от свойства stretch и вычислять высоту самого высокого блока скриптом и задавать min-height такой высоты всем блокам

  2. Позиционировать выпадающий список абсолютно, как работает обычный select , тогда вообще никакие блоки не будут растягиваться

И ещё, не нужно свойства flex дублировать для .task-box, все эти свойства задаются элементу для позиционирования его дочерних элементов, а у .task-box только один дочерний элемент

9
  • спасибо, но это половинчатые меры, особенно второй. Я двигаюсь больше в направлении удалять stretch у блоков при раскрытии данного, а при сворачивании его вновь всем присваивать
    – Вася
    28 июл 2018 в 8:40
  • Но при удалении stretch высота блоков будет меняться, тогда вообще нет смысла делать stretch 28 июл 2018 в 8:56
  • 1
    Можно при удалении stretch определять текущую высоту и устанавливать ее в min-height, а при сворачивании списков сбрасывать высоту и устанавливать stretch. В любом случае без скриптов не обойтись 28 июл 2018 в 8:57
  • присвоение ``min-height` высоты самого высокого блока результата не дало. Я попытался решить через присвоение, апри сворачивании исключение высоты и почти получилось, но эффект срабатывает только однократно. При повторном раскрытии списка на том же блоке- он начинает налазить на нижние - почему? Вот переписанный код (обновил вопрос) jsfiddle.net/pnfcs4bo/133
    – Вася
    31 июл 2018 в 11:33
  • 1
    при повторном открытии задается высота 275px а должно быть 291px чтобы не наезжало, сейчас нет возможности разбираться в коде, это так навскидку 31 июл 2018 в 11:54
1

На основе решения @E_K сделал уже и свое, которое теперь не только адаптивное, но и раскрывается-закрывается с правильной анимацией.

Вот фидл

Единственный момент - в демо-примере дергаются столбцы при раскрытии, т.к. в них отступов не хватает. С отступами работает все гуд на итоговом сайте.

var mh = 0;
$(".task-box").each(function() {
  var h_block = $(this).height();
  if (h_block > mh) {
    mh = h_block;
  }
});

$(".collapse").on("show.bs.collapse", function() {

  let boxes = $(".task-box").not($(this).parents(".task-box"));
  let parentBox = $(this).parents(".task-box");

  parentBox.attr("aria-expanded", "true").css("height", "auto");
  boxes.each(function() {
    var $this = $(this);
    if ($this.attr("aria-expanded") !== "true") {
      $this.height(mh);
    }
  });

});
$(".collapse").on('hide.bs.collapse', function() {

  let parentBox = $(this).parents(".task-box");
  parentBox.attr("aria-expanded", "false").height(mh);
  let boxes = $(".task-box").not($(this).parents(".task-box"));
  boxes.each(function() {
    if ($(this).height() > mh) {
      $(this).css("height", "auto");
    } else {
      $(this).height(mh);
    }
  });
});
#task .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#task .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 20px;
}

.task-box {
  position: relative;
  margin: 0 auto;
  color: rgb(95, 112, 135);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border: 1px solid #000;
}

.task-box .task-box-inner>a[aria-expanded="true"] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="task">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box class1" aria-expanded="false">
        <div class="task-box-inner">
          <h4>Lorem ipsum dolor sit amet</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
          <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-1">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box class2" aria-expanded="false">
        <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-2">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
              <p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box class3" aria-expanded="false">
        <img class="img-fluid" src="img/event-3.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Modi, nam maxime aspernatur necessitatibus.</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem
            ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-3">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid, officia labore vel quod cupiditate veritatis temporibus incidunt consectetur molestiae. Cum voluptatibus nesciunt odit alias sint harum in, officia optio.</div>

Ваш ответ

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

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