У меня есть группа из <li>
элементов и внутри них у меня есть <div>
с классом expander
.Элемент списка расширения jQuery
Когда элемент списка щелкнул по расширителю в первые 3 капли вниз под элементом списка, и это нормально, но когда вы нажимаете 4-ю опцию, экспандер переходит поверх нее как ее на новую строку.
jsFiddle здесь показывает вам пример моей проблемы, и я надеюсь, что кто-то может быть любезным, чтобы помочь мне.
CSS
section {
width: 758px;
float: left;
}
.products {
width: 100%;
position: relative;
float: left;
}
.product {
width: 219px;
margin: 0 20px 20px 0;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.product a {
display: block;
width: 100%;
height: 287px;
border: 2px solid #f2dd09;
overflow: hidden;
position: relative;
float: left;
}
.product a .info {
position: absolute;
bottom: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
z-index: 6;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
font-size: 13px;
}
.product .expander {
position: absolute;
background: #ddd;
top: 300px;
left: 0;
height: 0;
width: 100%;
margin-top: 10px;
text-align: left;
overflow: hidden;
}
HTML
<section>
<h1 class="page-title">Expander should drop underneath the li element</h1>
<ul class="products">
<li class="product-category product first" data-slug="block-1" style="height: 287px;">
<a href="#" class="">
<div class="info">
<h3>Block 1</h3>
</div>
<img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 1" width="219" height="283"/>
</a>
<div class="expander" style="height: 0px;"></div>
</li>
<li class="product-category product" data-slug="other" style="height: 287px;">
<a href="#" class="">
<div class="info">
<h3>Other</h3>
</div>
<img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Other" width="219" height="283"/>
</a>
<div class="expander" style="height: 0px;"></div>
</li>
<li class="product-category product" data-slug="block-2" style="height: 287px;">
<a href="#" class="">
<div class="info">
<h3>Block 2</h3>
</div>
<img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 2" width="219" height="283"/>
</a>
<div class="expander" style="height: 0px;"></div>
</li>
<li class="product-category product last" data-slug="block-3" style="height: 287px;">
<a href="#" class="">
<div class="info">
<h3>Block 3</h3>
</div>
<img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 3" width="219" height="283"/>
</a>
<div class="expander" style="height: 0px;"></div>
</li>
</ul>
</section>
JQuery
$('body').on('click','.products .product-category', function(e){
e.preventDefault();
var slug = $(this).data('slug');
if ($('.products .product-category[data-slug="'+slug+'"] .expander').height() > 0) {
console.log('1.1');
$('.products .product-category a').removeClass('active');
$('.products .product-category[data-slug="'+slug+'"] .expander').html('').css({'height':'0px'}).parent().animate({height:287},200);
console.log('1.2');
} else {
console.log('2.1');
$('.products .product-category a').removeClass('active');
$('.products .product-category[data-slug="'+slug+'"] a').addClass('active');
$('.products .product-category:not([data-slug="'+slug+'"]) .expander').html('').css({'height':'0px'}).parent().animate({height:287},200, function() {
$('.products .product-category[data-slug="'+slug+'"] .expander').html('<ul>'+slug+'</ul>').css({'height':'287px'}).parent().animate({height:600},200);
});
console.log('2.2');
}
});
Validate вы HTML - Не оберните дивы в ссылках – mplungjan
@mplungjan 1 вперед Slash неуместны – ngplayground
вы увеличиваете высоту от li до 600px и исправления расширителя div 300px сверху, он отлично работает для 3-х верхних ячеек, но когда вы нажимаете на 4-й ячеистый экспандер, еще 300px сверху t, почему он перекрывает 4-я ячейка. Поэтому вы должны попробовать другой подход для этого –