Самозагрузка 4 раскрывающегося списка, скрывающего заднюю позицию липкого дива - PullRequest
Новая
       4

Самозагрузка 4 раскрывающегося списка, скрывающего заднюю позицию липкого дива

0 голосов
/ 07 февраля 2019

Я хочу использовать аккордеон на своей странице.У меня в гармошке карта Bootstrap 4 .Я хочу сделать заголовок карты липким, когда пользователь начинает прокручивать.У меня есть выпадающий список в разделе заголовка карты.Когда я открываю выпадающий список, он прячется за заголовком следующей карты.что решить эту проблему? 

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

моя скрипка

проблема выглядит так [this image shows my problem 2

1 Ответ

0 голосов
/ 07 февраля 2019

Это решает, что вы используете класс "sticky-top", который добавляет z-index к заголовку на 1020, поэтому всегда появляется следующий текст поверх выпадающего списка. Просмотрите мою скрипку ее удалите на третьих. 

<!-- 
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...