自举4下拉隐藏背面的位置粘股利

问题描述 投票：0回答：1

我想实现我的页面手风琴。我有一个引导4卡内的手风琴。我想使卡头粘在用户开始滚动。我有下拉卡头部分。当我打开下拉菜单，它隐藏忘词头后面。什么来解决这个问题？

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

my fiddle

问题是这样的[2

javascript html5 css3 bootstrap-4
1个回答
1
投票

它解决了您使用的类“粘顶”至极的1020添加的z-index到标题所以总是apairs在下拉列表旁边的文本。 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.