html - 如何修复翻转 div 背面的 Bootstrap 下拉 z-index？

Question

我有多个 div，可以通过 css 转换在悬停时翻转它们。
在每个背面，我都有一个带有下拉按钮的 Bootstrap 按钮组。
如果我展开下拉菜单，列表就会隐藏在下一个 div 后面。

如何将列表置于最前面？

http://www.bootply.com/3ugZnOsnY2

Answer 1

只需监听 bootstraps 下拉事件，然后调整元素的 z-index。检查代码片段，你应该选择比我做的更精确的选择器。

$('.flip').hover(function(){
  $(this).find('.card').toggleClass('flipped');
});

$('.btn-group').on('show.bs.dropdown', function () {
  $(this).parentsUntil($( ".face", ".back")).css('zIndex', 200);
})

$('.btn-group').on('hidden.bs.dropdown', function () {
  $(this).parentsUntil($( ".face", ".back")).css('zIndex', 0);
})

body{
  padding-top:50px;
  background: #555;
}
.flip {
  -webkit-perspective: 800;
perspective: 800;

    position: relative;
 text-align: center;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.flip .card {

  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}
.flip .card .face {

  -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
  z-index: 2;
   
}
.flip .card .front {
  position: absolute;
   width: 100%;
  z-index: 1;

}
.flip .card .back {
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="container">
    <div class="row">

      <div class="col-sm-12">
        <div class="flip">
          <div class="card">

            <div class="face front">
              <div class="well well-sm"> Front</div>
            </div>

            <div class="face back">
              <div class="well well-sm">
              Back
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">1</button>
                  <button type="button" class="btn btn-default">2</button>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      Dropdown
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Dropdown link 1</a></li>
                      <li><a href="#">Dropdown link 2</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>


      <div class="col-sm-12">
        <div class="flip">
          <div class="card">
            <div class="face front">
              <div class="well well-sm"> Front</div>
            </div>

            <div class="face back">
              <div class="well well-sm">
              Back
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">1</button>
                  <button type="button" class="btn btn-default">2</button>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      Dropdown
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Dropdown link 1</a></li>
                      <li><a href="#">Dropdown link 2</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>

玩得开心!