4 
$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

鼠标悬停工作正常，但我需要在点击后打开。如果我在单击下拉列表时将.hover替换为.click，它会快速打开和关闭。

是否可以使用引导程序以传统方式执行此操作，单击时打开并在鼠标移出或单击其他任何位置时关闭？任何帮助。谢谢。

4

6 回答 6

9

您可以使用 CSS3 过渡：

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}

.open .dropdown-menu {
    opacity: 1;
}

在http://caniuse.com/css-transitions检查浏览器支持

于 2014-04-03T04:38:17.833 回答
9

在 BootStrap 3 中，您可以使用下拉事件：

       // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
        $('.dropdown').on('show.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // ADD SLIDEUP ANIMATION TO DROPDOWN //
        $('.dropdown').on('hide.bs.dropdown', function (e) {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
        });
于 2014-04-16T08:07:03.660 回答
5

Yokomizor 关于使用 CSS 过渡的回答是一个好主意，但在他的代码如下：

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
}

他最终做的是他只是让下拉菜单不可见，但实际上下拉菜单上的东西仍然存在，只是你看不到它。更好的方法是：

.dropdown-menu {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    transform: rotateX(90deg);
    transform-origin: top;
    opacity: 0;
    display: block;
}
.open .dropdown-menu {
    opacity: 1;
    transform: rotateX(0deg);
    transform-origin: top;
}

在这种情况下，它还创建了一个漂亮的（有点）向下和向上滑动的动画。

演示

于 2016-03-15T06:50:53.183 回答
2

试试这个，看看这是不是你要找的。点击打开下拉菜单，鼠标移开隐藏。http://jsbin.com/ibovag/1/

$('.dropdown-menu').on('mouseover', function(){
  $(this).on('mouseleave',hideDropdown);
});
function hideDropdown(e)
{
  $(this).closest('.open').removeClass('open');
  $(this).off('mouseleave');
 }
于 2013-04-27T00:33:01.957 回答
0

我已经在悬停时使用它并且工作正常，这是这个的小提琴

http://jsfiddle.net/html5beginners/rtqnxrLd/6/embedded/result/

body {
  background: #333;
  width: 98% !important;
}
.DonateUs{
    width: 200px;
height: 60px;
background: none repeat scroll 0% 0% #16A085;
color: #fff;
Padding: 13px 56px;
font-size: 20px;
border-radius: 5px;
box-shadow: 0px 4px 0px #023d31;
float:right
text-shadow: 0px 1px 0px #023d31;font-family: oswald;
}
.navbar-x {
  text-align: center;
}

.navbar-x .nav {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a {
  color: #eee;
}

.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li > a {
  width: 94px;
  color: #eee;
  transition: color 0.42s ease-in-out;
}

.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.active > a {
  color: #FFCB00;
  background-color: inherit;
}

.navbar-x .nav > li.bottom-bar {
  transition: left 0.42s ease-in-out;
  position: absolute;
  height: 3px;
  width: 90px;
  bottom: 0;
  background-color: #ebbf00;
}

.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar {
  left: 0px;
}

.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar {
  left: 0px !important;
}

.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar {
  left: 100px;
}

.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar {
  left: 100px !important;
}

.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar {
  left: 200px;
}

.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar {
  left: 200px !important;
}

.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar {
  left: 300px;
}

.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar {
  left: 300px !important;
}

.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar {
  left: 400px;
}

.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar {
  left: 400px !important;
}

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 360px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #bbb;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #383838;
  background: rgba(34, 34, 34, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}

.about a {
  color: #eee;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}

.about a:hover {
  text-decoration: none;
  background: #555;
  background: rgba(255, 255, 255, 0.15);
}

.about-links {
  height: 30px;
}

.about-links > a {
  float: left;
  width: 33%;
  line-height: 30px;
  font-size: 12px;
}

.about-author {
  margin-top: 5px;
}

.about-author > a {
  padding: 1px 3px;
  margin: 0 -1px;
}

.logo-html5beginners {
  margin: -12px 0 0 0px;
  width: 39%;
}
于 2015-03-02T13:28:30.037 回答
0

您可以使用 JQuery 中的 slideToggle！

http://api.jquery.com/slideToggle/

像这样：

$('.navbar .dropdown').click(function() {
  $('.dropdown-menu', this).slideToggle(250);
});
于 2013-04-27T00:47:37.590 回答