Question

我想在我的页面中实现手风琴。我手风琴内有一张 Bootstrap 4 卡。当用户开始滚动时，我想使卡头保持粘性。我在卡头部分有下拉菜单。当我打开下拉菜单时，它隐藏在下一个卡片头的后面。该怎么解决这个问题？

<html>
 <accordion>
   <dropdown>
   </dropdown>
 </accordion>
</html>

my fiddle

问题看起来像这样 [ this image shows my problem 2

Answer 1

它可以解决您正在使用“粘顶”类的情况，该类在1020时将z-index添加到标题，因此始终会在下拉菜单中保留下一个文本。 Review my fiddle将其删除到第三位。

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="accordion" role="tablist">
  <div class="card" ng-repeat="">
    <div class="card-header" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white;z-index:0;">
        hello world
      </div>
    </div>
  </div>
  <div class="card" ng-repeat="">
    <div class="card-header" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion1">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion1" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white">
        hello world
      </div>
    </div>
  </div>
  <div class="card" ng-repeat="">
    <div class="card-header" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion2">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion2" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white">
        hello world
      </div>
    </div>
  </div>

  <div class="card" ng-repeat="">
    <div class="card-header" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion3">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion3" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white">
        hello world
      </div>
    </div>
  </div>
  <div class="card" ng-repeat="">
    <div class="card-header" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion4">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion4" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white">
        hello world
      </div>
    </div>
  </div>
  <div class="card" ng-repeat="">
    <div class="card-header sticky-top" id="heading-1" style="top:0;" data-toggle="collapse" data-target="#myaccordion5">
      <div class="dropdown mx-3">

        <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          mydropdown
        </div>

        <div class="dropdown-menu" style="min-width: 8rem;">

          <a class="dropdown-item">
            <div>1</div>
          </a>
          <a class="dropdown-item">
            <div>2</div>
          </a>
          <a class="dropdown-item">
            <div>3</div>
          </a>
          <a class="dropdown-item">
            <div>4</div>
          </a>
          <a class="dropdown-item">
            <div>5</div>
          </a>

        </div>

      </div>
    </div>
    <div id="myaccordion5" class="collapse" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body" style="background-color:white">
        hello world
      </div>
    </div>
  </div>
</div>

bootstrap 4下拉菜单隐藏后面的位置粘性div

1 个答案: