zoukankan      html  css  js  c++  java
  • bootstrap dropdown的点击变为:hover 后自动下拉

    翻了不少地方。找到这段代码。

    先把这个复制到bootstrap.min.js下面增加

     1 /*
     2 
     3  * Project: Twitter Bootstrap Hover Dropdown
     4  * Author: Cameron Spear
     5  * Contributors: Mattia Larentis
     6  *
     7  * Dependencies?: Twitter Bootstrap's Dropdown plugin
     8  *
     9  * A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
    10  *
    11  * No license, do what you want. I'd love credit or a shoutout, though.
    12  *
    13  * http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
    14  */
    15 ;(function($, window, undefined) {
    16     // outside the scope of the jQuery plugin to
    17     // keep track of all dropdowns
    18     var $allDropdowns = $();
    19          
    20     // if instantlyCloseOthers is true, then it will instantly
    21     // shut other nav items when a new one is hovered over
    22     $.fn.dropdownHover = function(options) {
    23          
    24         // the element we really care about
    25         // is the dropdown-toggle's parent
    26         $allDropdowns = $allDropdowns.add(this.parent());
    27          
    28         return this.each(function() {
    29             var $this = $(this).parent(),
    30                 defaults = {
    31                     delay: 500,
    32                     instantlyCloseOthers: true
    33                 },
    34                 data = {
    35                     delay: $(this).data('delay'),
    36                     instantlyCloseOthers: $(this).data('close-others')
    37                 },
    38                 options = $.extend(true, {}, defaults, options, data),
    39                 timeout;
    40          
    41             $this.hover(function() {
    42                 if(options.instantlyCloseOthers === true)
    43                     $allDropdowns.removeClass('open');
    44          
    45                 window.clearTimeout(timeout);
    46                 $(this).addClass('open');
    47             }, function() {
    48                 timeout = window.setTimeout(function() {
    49                     $this.removeClass('open');
    50                 }, options.delay);
    51             });
    52         });
    53     };
    54          
    55     $('[data-hover="dropdown"]').dropdownHover();
    56 })(jQuery, this);

    在你调用的地方里加上
    $('.dropdown-toggle').dropdownHover(time);

    //time是你给的反应时间。比如500这样。

    然后加点击链接如下:
    $('a.dropdown-toggle').one('click',function(){

      location.href= $(this).attr('href');

    });

  • 相关阅读:
    强制设置IE浏览器的版本模式
    设置DIV根据内容自动调整高度的三个方法
    VS2010如何调试IIS上的网站
    DataSet和List<T> 泛型之间互相转换 (转载, 作者写的很好)
    List转DataSet
    数据库中单个表数据备份
    第二阶段冲刺(第二天)
    冲刺第二阶段(第一天)
    学习进度条(第十四周)
    学习进度条(第十三周)
  • 原文地址:https://www.cnblogs.com/loveyatou/p/4527671.html
Copyright © 2011-2022 走看看