bootsrap下拉框效果自定义修改

​

用bootstrap下拉框时有很多需要自己修改的东西，但有时又找不到应该修改那些属性，本文就这些属性进行了整理。

1.在下拉框的点击事件中,加上鼠标悬停hover事件。

• 首先，添加代码到bootstrap.js里。

  

;(function ($, window, undefined) {
// 这是boot
var $allDropdowns = $();


// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function (options) {
    // don't do anything if touch is supported
    // (plugin causes some issues on mobile)
    if('ontouchstart' in document) return this; // don't want to affect chaining


    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());


    return this.each(function () {
        var $this = $(this),
            $parent = $this.parent(),
            defaults = {
                delay: 100,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            showEvent   = 'show.bs.dropdown',
            hideEvent   = 'hide.bs.dropdown',
            // shownEvent  = 'shown.bs.dropdown',
            // hiddenEvent = 'hidden.bs.dropdown',
            settings = $.extend(true, {}, defaults, options, data),
            timeout;


        $parent.hover(function (event) {
            // so a neighbor can't open the dropdown
            if(!$parent.hasClass('open') && !$this.is(event.target)) {
                // stop this event, stop executing any code
                // in this callback but continue to propagate
                return true;
            }


            openDropdown(event);
        }, function () {
            timeout = window.setTimeout(function () {
                $parent.removeClass('open');
                $this.trigger(hideEvent);
            }, settings.delay);
        });


        // this helps with button groups!
        $this.hover(function (event) {
            // this helps prevent a double event from firing.
            // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
            if(!$parent.hasClass('open') && !$parent.is(event.target)) {
                // stop this event, stop executing any code
                // in this callback but continue to propagate
                return true;
            }


            openDropdown(event);
        });


        // handle submenus
        $parent.find('.dropdown-submenu').each(function (){
            var $this = $(this);
            var subTimeout;
            $this.hover(function () {
                window.clearTimeout(subTimeout);
                $this.children('.dropdown-menu').show();
                // always close submenu siblings instantly
                $this.siblings().children('.dropdown-menu').hide();
            }, function () {
                var $submenu = $this.children('.dropdown-menu');
                subTimeout = window.setTimeout(function () {
                    $submenu.hide();
                }, settings.delay);
            });
        });


        function openDropdown(event) {
            $allDropdowns.find(':focus').blur();


            if(settings.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');


            window.clearTimeout(timeout);
            $parent.addClass('open');
            $this.trigger(showEvent);
        }
    });
};


$(document).ready(function () {
    // apply dropdownHover to all elements with the data-hover="dropdown" attribute
    $('[data-hover="dropdown"]').dropdownHover();
});


})(jQuery, this);

• 之后，再引入这一段js(直接写在页面或者放在一个js文件里引入都可以)

$('.dropdown-toggle').dropdownHover();

$('a.dropdown-toggle').one('click',function(){ location.href= $(this).attr('href'); });

2.修改点击和悬停时的背景颜色

先说下原理：单鼠标点击或悬停时，会在.dropdown中加一个类open，因此修改open下的hover和focus就可以了。

直接在bootstrap.css中搜 .navbar-default .navbar-nav > .open > a 下面的color是字体颜色，background-color就是背景颜色。

3.修改下拉框li触发时的字体颜色和背景色

原理不用多说了，直接修改.dropdown-menu > li > a:hover里面的属性吧，如果想修改响应式里的颜色，就找@media里面的dropdown-menu修改。

​