zoukankan      html  css  js  c++  java
  • Bootstrap dorpdown hover

    Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化。

    一、纯css样式控制。

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;     // remove the gap so it doesn't close
    }
    

      优点:实现简单,无需借助js。

      缺点:触发按钮跟下拉菜单之间不能有间隙,否则一失焦下拉菜单就会消失。

    二、插件实现。

      bootstrap-hover-dropdown 插件可以实现此功能。  

    <!-- script order matters! -->
    <script src="/path/to/jquery.min.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>
    <script src="/path/to/bootstrap-hover-dropdown.min.js"></script>
    
    
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            Account <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">菜单一</a></li>
        </ul>
    </li>
    

      优点:使用简单。

      缺点:该插件存在不确定性BUG,且自从2015年底至今一直没有维护更新。
         (亲历:多行表格中,每行都有dropdown按钮,hover时有时显示不正常)。

    三、css+hover+timeout实现。

      基于方案一,通过样式控制是否显示,通过hover事件控制是否添加样式,通过timeout解决异常失焦问题。

    .dropdown.hover .dropdown-menu {
      display: block;
      margin-top: 0;
    }
    
    $('[data-toggle="dropdown"]').hover(function(){
        var $parents = $(this).parents('.dropdown');
        window.dropDownTimer&&clearTimeout(window.dropDownTimer);
        $('.dropdown').removeClass('hover');
        $parents.addClass('hover');
    },function(){
        var $parents = $(this).parents('.dropdown');
        window.dropDownTimer = setTimeout(function(){
            $parents.removeClass('hover');
        },500)
    })
    

      

  • 相关阅读:
    php中的多态
    面向对象的继承与组合
    PHP中的__call和__callStatic方法
    PHP中的__set和__get方法
    PHP中对象的本质
    mysql字符串查找(统计客源)
    linux查看文件大小
    mysql常用字符串操作函数大全,以及实例
    mysql滑动订单问题
    mysql列反转Pivoting
  • 原文地址:https://www.cnblogs.com/newh5/p/9049569.html
Copyright © 2011-2022 走看看