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');

    });

  • 相关阅读:
    iOS开发App上传的三大步骤
    iOS开发关于AppStore程序的上传流程
    AFNetworking 3.0x版本最新特性
    iOS开发中两个不错的宏定义
    iOS开发中NSDate时间戳的转换--
    HDU 2844 Coins 多重背包
    poj 1888 Crossword Answers 模拟题
    杭电oj 1069 Monkey and Banana 最长递增子序列
    郑轻校赛题目 问题 G: 多少个0
    HDU 2571 命运
  • 原文地址:https://www.cnblogs.com/loveyatou/p/4527671.html
Copyright © 2011-2022 走看看