Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2015, 19:23
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 12.07.2015
Сообщений: 6

Помогите разобраться с .height()
Приветствую.

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

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

P.S. надеюсь объяснил доступно)
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2015, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,798

Открывашка 223 взаимозависимая
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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2015, 21:47
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 12.07.2015
Сообщений: 6

рони,
очередной раз, большое Вам спасибо. Ваш способ мне езе разбирать и разбирать, если у вас будет минутка, объясните, почему же мой "простой" способ не работал?
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2015, 22:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,798

tutzya,
строка 12 взять высоту только самого первого элемента - а не того который нужен
var contHeight = $('.hide').height();

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

Последний раз редактировалось рони, 02.08.2015 в 22:11.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите разобраться с this uroboros7 jQuery 4 01.01.2015 23:56
Помогите разобраться с калькулятором Maksim858 Ваши сайты и скрипты 1 27.12.2014 12:23
Получение ответа сервера через iframe и xhr. Помогите разобраться. Arconas AJAX и COMET 0 26.02.2013 08:38
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 09:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 16:24