重複するリストアイテムを重複させる方法

Question

タブレットとモバイルビューでスタックする3つの順序付けられていないリストがあります。 heightsは'column'クラスがクリックされるまで0に設定され、jQueryを使用してmax-heightに移行します。スタックするまでうまく動作します。私は、Liのposition:relative;z-index:1にトップ李さんposition:relative;z-index:3、中央の李さんposition:relative;z-index:2;、および下を設定しようとしています。ただし、期待どおりにスタックしません。彼らが期待どおりに行動しないような何かがありますか？ありがとう、どんな情報も役立つでしょう。

<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; 
} 

列が205pxに対応するUL高遷移をクリックするJS 。問題は、ビューが> 991pxであり、それらが互いに重なり合わないことです。 to 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

Iは.columnのheightを削除：

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

Iはまた、100％の代わりに、102％に.banner-dropdownのwidthを変え。