1

ССЫЛКА НА CODEPEN

Есть такая структура (li:inline-block; при ресайзе перестраиваются друг под друга):

$('.on').click(function(){
  var that = $(this),
    item = $('.item'),
    itemNum = that.data('item');
  
  console.log(item.offset().top+ item.outerHeight(true));
  
  item.filter('.item__'+itemNum).css({
			'top': item.offset().top+ item.outerHeight(true) - $(window).scrollTop()
		});

  item.filter('.item__'+itemNum)
    .addClass('open')
    .siblings()
    .removeClass('open');
  
  
  $(window).resize(function() {
       console.log(item.offset().top+ item.outerHeight(true));
    
			item.filter('.item_'+itemNum).css({
				'top': item.offset().top+ item.outerHeight(true) - $(window).scrollTop()
			});
		});		
});
i {
  display: block;
  width: 100px;
  height: 100px;
  background: #ccc;
}

ul li {
  display: inline-block;
}

.wrap {
  position: relative;
}

.item {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  background: #000;
  
  display: none;
}

.item.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<div class="wrap">
  <ul>
  <li class="on" data-item = "item-1"><i></i></li>
  <li class="on" data-item = "item-2"><i></i></li>
  <li class="on" data-item = "item-3"><i></i></li>
  <li class="on" data-item = "item-4"><i></i></li>
  <li class="on" data-item = "item-5"><i></i></li>
</ul>
  
  <ul>
    <li class="item item__item-1">
      <span></span>
    </li>
  </ul>
</div>

Нужно чтобы соответствующие лишкам блоки item__item-1\2\3... принимали соответствующее положение top li.on height (блок под лишкой).

В моем рабочем варианте, почему-то offset().top какие-то непонятные значения и всегда разные выдает. Если использовать position: fixed то все отлично, но как абсолют так все ломается!

Может быть кто-то подскажет что не так в коде.

1 ответ 1

0

Помог position.top():

$('.on').click(function(){
  var that = $(this),
    item = $('.item'),
    itemNum = that.data('item');
  
  
  console.log(that.position().top +' ' + that.outerHeight(true))
  
  item.filter('.item__'+itemNum).css({
    'top': that.position().top + that.outerHeight(true)
  });

  item.filter('.item__'+itemNum)
    .addClass('open')
    .siblings()
    .removeClass('open');
  
  
  $(window).resize(function() {      
    
    item.filter('.item_'+itemNum).css({
      'top': that.position().top + that.outerHeight(true)
    });
  });		
});
i {
  display: block;
  width: 100px;
  height: 100px;
  background: #ccc;
}

ul li {
  display: inline-block;
}

.wrap {
  position: relative;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: #000;
  
  display: none;
}

.item.open {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<div class="wrap">
  <ul>
  <li class="on" data-item = "item-1"><i></i></li>
  <li class="on" data-item = "item-2"><i></i></li>
  <li class="on" data-item = "item-3"><i></i></li>
  <li class="on" data-item = "item-4"><i></i></li>
  <li class="on" data-item = "item-5"><i></i></li>
</ul>
  
  <ul>
    <li class="item item__item-1">
      <span></span>
    </li>
    <li class="item item__item-2">
      <span></span>
    </li>
    <li class="item item__item-3">
      <span></span>
    </li>
    <li class="item item__item-4">
      <span></span>
    </li>
    <li class="item item__item-5">
      <span></span>
    </li>
  </ul>
</div>

Ваш ответ

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

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