jquery - 如何堆叠重叠的列表项

Question

我有 3 个无序列表，它们在平板电脑和移动设备 View 中堆叠。它们的 heights 设置为 0 直到单击 'column' 类，然后它们转换为 max-height 使用 jQuery。这工作正常，直到他们堆叠。我试过设置top li's position:relative;z-index:3, the middle li's 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单击一列时，相应的 ul 高度会转换为 205px。问题是 View > 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

我删除了 .column 的 height :

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

我还将 .banner-dropdown 的 width 更改为 100% 而不是 102%。