2

Есть блок <div class=”1” position= relative> в нем есть еще 4 дива с информацией. Первый из дивов имеет позицию абсолют. Прижатый к низу блока 1 (две строчки текста который при нажатии на ссылку раскрывается еще строчек на 20). Раскрывается в вверх и наезжает на блок который стоит над ним. А мне нужно чтобы расширялся в низ. То есть div class=”1” position= relative увеличился на высоту div с position= absolute. Как это реализовать с помощью JS.

$.fn.clicktoggle = function(a, b) {
  return this.each(function() {
    var clicked = false;
    $(this).click(function(e) {
      e.preventDefault();
      if (clicked) {
        clicked = false;
        return b.apply(this, arguments);
      }
      clicked = true;
      return a.apply(this, arguments);
    });
  });
};
$(function() {
  $('.more').clicktoggle(function() {
    $(this).parent().prev().slideToggle(700);
    $(this).text('Hide');
  }, function() {
    $(this).parent().prev().slideToggle(700);
    $(this).text('Read More');
  });
});
.body-content {
  min-height: 100%;
}

.content-wrap {
  position: relative;
  padding-bottom: 22em;
}

.description-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  border: 1px solid #ccc;
  width: 500px;
  margin: 0 0 30px 0;
  border-radius: 15px;
  padding: 15px;
}

.wrap-text {
  display: none;
}

.more {
  cursor: pointer;
  text-decoration: underline;
  color: #ff0000;
}

.more:hover {
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-content">
  <div class="content-wrap">
    <div class="description-wrap">
      <div class="wrap-text">
        <p>……...</p>
        <p>…………….</p>
      </div>
      <p><a class='more'>Больше</a></p>
    </div>
  </div>
  ` ` ` `
  <section id="block-slider">
    ……………………..
  </section>
  <section id="service">
    …………………………………………………
  </section>
  <section id="portfolio">
    …………………………
  </section>
</div>
</div>
`

1 ответ 1

0

Я бы реализовывал эту задачу через css:

.АБСОЛЮТНО_СПОЗИЦИОНИРОВАННЫЙ_ДИВ{
   top: 100%; // вместо bottom: 0;
              // тогда блок, увеличиваясь по вертикали,
              // будет расти как бы вниз
              // и никаких проблем c zIndex не будет
}

При таком раскладе увеличивать высоту div.1 — не нужно вовсе.

Если же принципиально нужно использовать js, то алгоритм следующий:

1) увеличиваем $('.АБСОЛЮТНО_СПОЗИЦИОНИРОВАННЫЙ_ДИВ') на нужную нам высоту;

2) вычисляем его метрики $('.АБСОЛЮТНО_СПОЗИЦИОНИРОВАННого_ДИВа');

3) Вычисляем высоту $('div.1');

4) Прибавляем к высоте $('div.1') полученный во 2м пункте показатель.

Если не получится реализовать этот алгоритм самому, то я напишу код

4
  • Я только начал изучать JS. Реализовать этот алгоритм пока сложно. Можете написать код. Буду разбираться.
    – Drongo_x17
    23 ноя 2017 в 14:20
  • @Drongo_x17, а почему не подходит вариант с css? В коде, который вы привели -- это оптимальное решение. Если вы учитесь и не поняли, о чем я написал -- настоятельно рекомендую задать вопросы о том, что не понятно в css, а не лезть в js. Вариант же со скриптом сейчас напишу в ответе ( вернее, отредактирую). 24 ноя 2017 в 5:13
  • Раскрытие текста в блоке <div class="description-wrap"> раскрывается по нажатию на <p><a class='more'>Больше</a></p>. То есть <div class="body-content"> должен увеличиться на высоту .description-wrap. А потом при повторном нажатии вернуться в исходное положение. Пробовал сделать через CSS не получилось. Ваш вариант не увеличивает в высоте .description-wrap.
    – Drongo_x17
    24 ноя 2017 в 7:28
  • Сможете помочь в решении моего вопроса?
    – Drongo_x17
    28 ноя 2017 в 8:41

Ваш ответ

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

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