10 Örtüşen liste öğeleri nasıl yığılır

Question

Tablet ve mobil görünümde yığın halinde bulunan 3 sırasız liste var. heights, 'column' sınıfı tıklanıncaya kadar 0 olarak ayarlanmıştır, daha sonra jQuery'yi kullanarak max-height'a geçiş yaparlar. Bu onlar yığına kadar iyi çalışıyor. Ben li enposition:relative;z-index:1 için üst li enposition:relative;z-index:3, orta li enposition:relative;z-index:2; ve dibini ayarı çalıştılar. Ancak, beklendiği gibi yığılmazlar. Beklendiği gibi davranmalarına sebep olmayacak başka bir şey var mı? Teşekkürler, herhangi bir bilgi yardımcı olacaktır.

<div class="container banner"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-4 column top-layer"> 
     <h3 class="text-center location-banner">Tampa</h3><span class="fa fa-fw fa-chevron-down"></span> 
     <div class="divider"></div> 
     <div class="banner-dropdown"> 
      <ul> 
      <li class="top">Top</li> 
      <li class="top">Top</li> 
      <li class="top">Top</li> 
      <li class="top">Top</li> 
      <li class="top">Top</li> 
      </ul> 
     </div> 
     </div> 
     <div class="col-md-4 column middle-layer"> 
     <h3 class="text-center location-banner">Jacksonville</h3><span class="fa fa-fw fa-chevron-down"></span> 
     <div class="divider"></div> 
     <div class="banner-dropdown"> 
      <ul> 
      <li class="middle">Middle</li> 
      <li class="middle">Middle</li> 
      </ul> 
     </div> 
     </div> 
     <div class="col-md-4 column bottom-layer"> 
     <h3 class="text-center location-banner">Orlando</h3><span class="fa fa-fw fa-chevron-down"></span> 
     <div class="divider"></div> 
     <div class="banner-dropdown"> 
      <ul> 
      <li class="bottom">Bottom</li> 
      <li class="bottom">Bottom</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS kolon 205px karşılık gelen ul yüksekliği geçişleri tıklandığında

.banner-dropdown { 
    max-height: 0; 
    width: 102%; 
    transition: all .3s ease; 
    margin: auto; 
    background: rgb(155, 155, 155); 
    position: relative; 
    top: 10px; 
    right: 15px; 
    overflow: hidden; 
} 


.top { 
    position: relative; 
    z-index: 3; 
} 
.middle { 
    position: relative; 
    z-index: 2; 
} 
.bottom { 
    position: relative; 
    z-index: 1; 
} 
.column { 
    background: rgba(8, 8, 8, 0.39); 
    height: 48px; 
    border: 4px solid #F8F8F8; 
    cursor: pointer; 
} 

JS . Sorun şu ki, görünüm> 991px'tir ve yığınları birbiri ile örtüşmüyorlar. Eğer ul açıksa ve ortadaki ul'i açarsanız, üst div üzerinden görünecek ve ortadaki ul, alt üste gider. Jquery ile eklenen yükseklikte bir şey olup olmadığından emin değil. Daha fazla bilgi gerekirse bana bildirin. Teşekkürler.

(function(){ 
    var cityDiv = $('.column'); 
    var span = $('span'); 

    cityDiv.click(function() { 
    if ($(this).find('span').hasClass('fa-chevron-down')) { 
     $(this).find('span').removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
     $(this).find('.banner-dropdown').css('max-height','205px'); 
    } else { 
     $(this).find('span').removeClass('fa-chevron-up').addClass('fa-chevron-down'); 
     $(this).find('.banner-dropdown').css('max-height','0px'); 
    } 
    }); 
}) 

Answer 1

Böyle bir şey mi istiyorsunuz?

.column { 
    background: rgba(8, 8, 8, 0.39); 
    border: 4px solid #F8F8F8; 
    cursor: pointer; 
} 

Ayrıca 102 yerine% .banner-dropdown ila% 100 width değiştirildi: See this fiddle

I height.column arasında çıkarın.