[英]Remove parent div in product grid
Firstly I want to apologize for my English. 首先,我想为我的英语道歉。 I have a html template for shop and it has interesting structure of product grid in category page:
我有一个用于商店的html模板,并且在类别页面中具有有趣的产品网格结构:
HTML: HTML:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
CSS: CSS:
.content-center .product-line {
position: relative;
height: 238px;
margin-bottom: 30px;
}
.content-center .product-line .product {
position: absolute;
color: #534741;
}
.content-center .product:nth-child(1) {
top: 0;
left: 0;
}
.content-center .product:nth-child(2) {
top: 0;
left: 330px;
}
.content-center .product:nth-child(3) {
top: 0;
left: 660px;
}
.content-center .product-small {
box-sizing: border-box;
width: 300px;
height: 238px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
}
.content-center .product-big {
box-sizing: border-box;
width: 630px;
min-height: 506px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
display: none;
}
JS: JS:
$('.detail').on('click', function() {
var _this = $(this);
var parentProduct = _this.closest('.product');
var parentLine = _this.closest('.product-line');
var index = parentProduct.index();
var eq1 = parentLine.find('.product').eq(0);
var eq2 = parentLine.find('.product').eq(1);
var eq3 = parentLine.find('.product').eq(2);
$('.product-small').show();
$('.product-big').hide();
$('.product-line').css('height', '237px');
$('.product').removeAttr('style');
switch (index)
{
case 0:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '660px', 'top' : 0});
eq3.css({'left' : '660px', 'top' : '268px'});
break;
case 1:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '330px', 'top' : 0});
eq3.css({'left' : 0, 'top' : '268px'});
break;
case 2:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : 0, 'top' : '268px'});
eq3.css({'left' : '330px', 'top' : 0});
break;
}
parentProduct.find('.product-big').show();
parentProduct.find('.product-small').hide();
parentLine.css('height', parentProduct.find('.product-big').innerHeight());
});
Is it possible to make same functional but use only one block where products stored. 是否可以使相同的功能但只使用一个存储产品的块。
Now I have a lot of blocks where stored 3 products(x lines per 3 products), and I need to make only one block and unlimited products. 现在,我有很多块存储3个产品(每3个产品x行),并且我只需要制作一个块和不限数量的产品。 For example make something like that:
例如,做这样的事情:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
I'm tried to use float:left
method, but when i click "detail" button the grid is braking. 我尝试使用
float:left
方法,但是当我单击“详细信息”按钮时,网格正在制动。 Site with current functional: link 具有当前功能的网站: 链接
Generally, use float
, but float:right
every 2nd and 3rd items selected product should have a class 'selected'; 通常,使用
float
,但float:right
所选产品的第二个和第三个项目都应具有“ selected”类; don't use style
attribute (always important to separate style and content) 不要使用
style
属性(对于分隔样式和内容总是很重要的)
.product { float: left; }
.product.selected:nth-child(3n),
.product.selected:nth-child(3n+2) { float: right; }
.product.product-small { display: block; }
.product.selected .product-small { display: none; }
.product.product-big{ display: none; }
.product.selected .product-big{ display: block; }
you'll probably have problems that now #content-main
is considered empty, but I believe you'll be able to manage that (try clear:both
). 您可能会遇到一些问题,现在
#content-main
被认为是空的,但是我相信您将能够进行管理(尝试clear:both
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.