Question

我想使Bootstrap中的下拉菜单消失，而不仅仅是立即弹出。

我已经尝试过使其工作，但是只有当我将鼠标悬停在下拉菜单上时，它才会淡入（直到我这样做之前，它都是不可见的，即使选择了下拉按钮也是如此）：

.nav-pills > li > a { border: 1px solid #242323 }
.nav-pills > li.active > a,
.nav-pills > li > a:hover, .nav-pills > li > a:focus,
.nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #00BFFF;
  background-color: #242323;
  border: 1px solid #00BFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-pills .open > a, .nav-pills .open > a:hover, .nav-pills .open > a:focus {
  background-color: #242323;
  border: 1px solid #00BFFF;
  color: #00BFFF;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu > li > a { color: #E0E0E0 }
.blog-top > .align-left > .nav > .dropdown > .dropdown-menu > li:hover > a {
  color: #00BFFF;
  background-color: #404040;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu {
  background-color: #242323;
  border: 1px solid #00BFFF;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: .25s, transform .25s ease;
  -moz-transition: .25s, transform .25s ease;
  -webkit-transition: .25s, transform .25s ease;
}

.blog-top > .align-left > .nav > .dropdown > .dropdown-menu:hover { opacity: 1 }

[aria-expanded=true].dropdown-toggle + ul.dropdown-menu { opacity: 1 }

我还尝试将opacity: 1;放在各个a:focus元素上，但这似乎无济于事。

这是HTML外观的一个示例：

<div class="blog-top">
  <div class="align-left">
    <ul class="nav nav-pills">

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">MENU <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
        </ul>
      </li>

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

Answer 1

默认将它们设置为opacity: 0和visiblity:hidden或z-index: -1。。

然后，在悬停时并使用CSS过渡，将它们设置为opacity: 1和visibility:visible或z-index: 1。

顺便说一句，直接子选择器（>）过于具体。您不应该每次都使用它。

这是一个代码段。请参阅此jsfiddle，以了解它可与Bootstrap 3配合使用。

.nav-pills li a {
  border: 1px solid #242323
}

.nav-pills li.active > a,
.nav-pills li a:hover,
.nav-pills li a:focus,
.nav-pills li.active a:hover,
.nav-pills li.active a:focus {
  color: #00BFFF;
  background-color: #242323;
  border: 1px solid #00BFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-pills .open a,
.nav-pills .open a:hover,
.nav-pills .open a:focus {
  background-color: #242323;
  border: 1px solid #00BFFF;
  color: #00BFFF;
}

.nav .dropdown-menu li a {
  color: #E0E0E0
}

.nav .dropdown-menu li:hover a {
  color: #00BFFF;
  background-color: #404040;
}

.nav .dropdown .dropdown-menu {
  background-color: #242323;
  border: 1px solid #00BFFF;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: .25s, transform .25s ease;
  -moz-transition: .25s, transform .25s ease;
  -webkit-transition: .25s, transform .25s ease;
  display: block;
  visibility: hidden;
}

[aria-expanded=true].dropdown-toggle + ul.dropdown-menu,
.nav .dropdown .dropdown-menu.show {
  visibility: visible;
  opacity: 1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blog-top">
  <div class="align-left">
    <ul class="nav nav-pills">

      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">MENU <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
          <li role="presentation"><a href="#">Item</a></li>
        </ul>
      </li>

    </ul>
  </div>
</div>

Answer 2

使用animate.css-与Bootstrap配合使用。 https://daneden.github.io/animate.css/

如何使Bootstrap下拉列表过渡不透明

2 个答案: