Форум

tutzya · #1 (**permalink**) 02.08.2015, 19:23

Приветствую.

Столкнулся с такой проблемой у выпадающих списков. К примеру есть выпадающий список и мне нужно, чтобы при открытии списка считалась его .height() и на это значение увеличивалась высота родительского блока.

Вот мой код: http://jsfiddle.net/c2dz94ng/34/ . При клике на элементы 3, 4, 5, 6 высота родительского блока прибавляется нормально, но у элементов 1 и 2 высота больше и при этом к родительскому блоку "новая" высота не прибавляется.

P.S. надеюсь объяснил доступно)

рони · #2 (**permalink**) 02.08.2015, 20:54

tutzya,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
    .block1, .block3 {
  position: relative;
  width: 500px;
  height: 50px;
  background: blue;
}

.block2 {
  position: relative;
  width: 500px;
  height: 125px;
  background: #fff;
  padding: 25px;
  transition: all 0.5s ease;
}

.block2 > div {
  float: left;
  width: 250px;
}

.elem {
  position: relative;
  margin-bottom: 20px;
  width: 200px;
}

.head {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: green;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.hide {
  border-top: none!important;
  border: 1px solid #bbb;
  padding: 10px;
}
  </style>



<script>
$(function() {
    var $h = $(".hide"),
        $a = $(".head"),
        $b = $(".block2");
    $h.each(function(indx, el) {
        el = $(el);
        var contHeight = el.height(),
            head = $a.eq(indx);
        el.hide();
        head.on("click", function(event) {
            event.preventDefault();
            $h.stop(true,true).not(el.slideToggle(800)).slideUp(800);
            $a.not(head.toggleClass("open")).removeClass("open");
            $b.height(125 + head.is(".open") * contHeight)
        })
    })
});

</script>


</head>
<body>
  <div class="block1"></div>
<div class="block2">
  <div class="left">
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Длинный спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Очень-очень длинный трудночитаемый спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
  </div>
  <div class="right">
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
    <div class="elem">
      <div class="head">Клик</div>
      <div class="hide">Спрятанный контент</div>
    </div>
  </div>
</div>
<div class="block3"></div>

</body>


</html>

tutzya · #3 (**permalink**) 02.08.2015, 21:47

рони,
очередной раз, большое Вам спасибо. Ваш способ мне езе разбирать и разбирать, если у вас будет минутка, объясните, почему же мой "простой" способ не работал?

рони · #4 (**permalink**) 02.08.2015, 22:05

tutzya,
строка 12 взять высоту только самого первого элемента - а не того который нужен

var contHeight = $('.hide').height();

да и как взять высоту у элемента без высоты ?

Форум

Справочник

Discord чат

Курсы javascript