Question

$('.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 ，则会打开并快速关闭。

是否可以通过引导程序执行此操作，单击时打开并在鼠标移动时单击或在其他位置单击时关闭？任何帮助。感谢。

Answer 1

在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();
        });

Answer 2

您可以使用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

上的浏览器支持

Answer 3

Yokomizor关于使用CSS过渡的answer是一个不错的主意，但在下面的代码中：

.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;
}

在这种情况下，它还会创建一个很好的（有点）向下和向下的动画。

Demo

Answer 4

试试这个，看看这是不是你想要的。单击打开下拉列表，鼠标移开以隐藏它。 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');
 }

Answer 5

您可以使用JQuery中的slideToggle！

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

像这样：

$('.navbar .dropdown').click(function() {
  $('.dropdown-menu', this).slideToggle(250);
});

Answer 6

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

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%;
}

单击时动画引导下拉菜单

6 个答案: