零基础建站培训介绍

当前位置:

bootstrap下拉菜单鼠标悬停弹出

bootstrap下拉菜单默认情况是鼠标点击后出现下拉菜单,对于我们实际做网站时,需要把它改成鼠标悬停弹出下拉菜单。

wordpress + bootstrap

bootstrap下拉菜单鼠标悬停弹出改造步骤

  1. 将自己网站引入bootstrap框架;
  2. 在网页的底部,加上以下的JS代码。
    <script>/*下拉菜单*/
    $(document).ready(function(){
    dropdownOpen();
    });
    function dropdownOpen() {
    var $dropdownLi = $('li.dropdown');
    $dropdownLi.mouseover(function() {
    $(this).addClass('open');
    }).mouseout(function() {
    $(this).removeClass('open');
    });
    }</script>
  3. 其中li,dropdown 是官网给的事例中的li标签的 class属性。通过以上的代码,我们就可以变成鼠标悬停弹出bootstrap下拉菜单了。

补充:除了上面的代码之外,我们还可以使用下面的JS代码,还可以实现缓冲下拉的效果。


  $(document).ready(function(){
 if($(window).width()>768){

            //鼠标划过就展开子菜单

            $('ul.nav li.dropdown').hover(function() {

              $(this).find('.dropdown-menu').stop(true, true).slideDown();

            }, function() {

              $(this).find('.dropdown-menu').stop(true, true).slideUp();

            });

      }
});
上一课: 下一课:

发表评论