javascript - Remove parent div in product grid -
firstly want apologize english. have html template shop , has interesting structure of product grid in category page:
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:
.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:
$('.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 possible make same functional use 1 block products stored.
have lot of blocks stored 3 products(x lines per 3 products), , need make 1 block , unlimited products. example make 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 use float:left method, when click "detail" button grid braking. site current functional: link
generally, use float, float:right every 2nd , 3rd items selected product should have class 'selected'; don't use style attribute (always important separate style , content)
.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 have problems #content-main considered empty, believe you'll able manage (try clear:both).
Comments
Post a Comment