引导下拉与Hover

我需要的很简单。

我已经设置了一个导航栏，其中有一些下拉菜单(使用class="dropdown-toggle" data-toggle="dropdown")，它工作得很好。

事情是它工作“onClick”，而我宁愿如果它工作“onHover”。

有什么内置的方法可以做到这一点吗?

当前回答

你可以使用Jquery实现这个功能:

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

2021-12-17 13:46:06

其他回答

你可以使用Jquery实现这个功能:

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');

});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

2021-12-17 13:46:06

对于CSS来说，当你点击它的时候，它会变得疯狂。这是我正在使用的代码，它也没有改变任何移动视图。

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

2014-11-20 06:57:21

悬停在导航项上，看到它们在悬停时激活。 http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

2013-09-09 15:28:53

使用jQuery的一个简单方法是:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

2013-10-04 21:57:23

通过添加属性display:block，在悬停时工作，并在单击时保持关闭;在CSS中删除这些属性data-toggle="dropdown" role="button"从按钮标签

.dropdown:hover .dropdown-menu { display: block; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle">Dropdown Example</button> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>

2019-01-21 11:17:27

引导下拉与Hover

推荐文章

最新文章

标签