jQuery擴展列表元素

我有一組<li>元素，其中我有<div>與類expander。jQuery擴展列表元素

當單擊列表項時，前3箇中的擴展器下拉到列表項下，這很好，但是當您單擊第4個選項時，擴展器將作爲其新行上的第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'); 
    } 
});

來源

2014-02-11 ngplayground

驗證你的HTML - 不要在包裝環節的div – mplungjan

@mplungjan 1斜線出來的地方 – ngplayground

你加高的li到600px，並固定從頂部的昂貴的分區300px，它的工作正常的頂部3細胞，但是當你點擊第四個細胞擴展器仍然300px從頂部塔這就是爲什麼它與第四個單元重疊。所以你必須爲此嘗試一些其他方法 –

我刪除float: left;從.product a

.product a { 
    display: block; 
    width: 100%; 
    height: 287px; 
    border: 2px solid #f2dd09; 
    overflow: hidden; 
    position: relative; 
}

設置top: auto;在.product .expander

.product .expander { 
    position: absolute; 
    background: #ddd; 
    top: auto; 
    left: 0; 
    height: 0; 
    width: 100%; 
    margin-top: 10px; 
    text-align: left; 
    overflow: hidden; 
}

jsFiddle Demo

來源

2014-02-11 17:23:57 ngplayground

jQuery擴展列表元素

回答

相關問題