Как складывать перекрывающиеся элементы списка

Question

У меня есть 3 неупорядоченных списка, которые стекаются при виде на планшетах и ​​мобильных устройствах. Их heights установлены на 0 до тех пор, пока не будет нажата клавиша 'column', затем они перейдут на max-height с помощью jQuery. Это прекрасно работает, пока они не упадут. Я попытался установитьposition:relative;z-index:3, середине Лиposition:relative;z-index:2; и Снизу началу Li к Лиposition:relative;z-index:1. Однако они не складываются так, как ожидалось. Есть ли что-то еще, что не могло бы заставить их вести себя так, как ожидалось? Спасибо, любая информация была бы полезна.

<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

.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 Когда колонна нажата соответствующие переходы по высоте уль к 205px. Проблема в том, что представление> 991px, и они складываются, они не перекрывают друг друга должным образом. Если на ul открыто и вы открываете среднюю ul, она будет отображаться через верхний div, а средняя ul будет ниже нижней ul. Не уверен, что это связано с тем, что высота добавляется с помощью jquery. Если вам нужна дополнительная информация, дайте мне знать. Благодарю.

(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

Вы хотите что-то вроде этого? See this fiddle

я удалить height из .column:

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

Я также изменил width от .banner-dropdown до 100% вместо 102%.