改變某個對象的CSS樣式時，不要使用JS直接添加樣式，

重繪：
使用js改變網頁的背景顏色 瀏覽器會把整個網頁的顏色重新在畫一遍，導致性能降低

回流：
只要改變某個DOM對象的寬或者高，瀏覽器就會重新再計算網頁結構，重新生成一次，導致性能嚴重降低。

CSS樣式的性能比JS性能更高，所以能使用CSS的就不要使用JS控制。

 

修改樣式有三種方式：

1，直接在CSS中修改樣式，比如hover:

.dropdown-active 是父元素

.dropdown-active,
.dropdown-active:hover {
	background: #fff;
}
.dropdown-active .dropdown-toggle,
.dropdown-active:hover .dropdown-toggle {
	border-left: 1px solid #cdd0d4;
	border-right: 1px solid #cdd0d4;
}
.dropdown-active .dropdown-layer,
.dropdown-active:hover .dropdown-layer {
	display: block;
}

2，使用JS添加一個類名  .dropdown-active

    $('.dropdown').hover(function() {
        $(this).addClass('dropdown-active');
    }, function() {
        $(this).removeClass('dropdown-active');
    });

3，性能最差，而且還復雜的一種，直接在JS中控制樣式：

    $('.dropdown').hover(function() {
        var $this = $(this);
        $this.css({
            background: '#fff'
        });

        $this.find('.dropdown-toggle').css({
            background:'#fff',
            'border-left':'1px solid #cdd0d4',
            'border-right':'1px solid #cdd0d4'
        })

        $this.find('.dropdown-layer').css({
            display:'block'
        })

        $this.find('.dropdown-item').hover(function(){
            $(this).css({
                'background':'#f3f5f7',
                color:'#4d555d'
            });
        },function(){
            $(this).css('background','#fff');
        })
    }, function() {
        var $this = $(this);
        $this.css({
            background: '#f3f5f7'
        });

        $this.find('.dropdown-toggle').css({
            background:'#f3f5f7',
            'border-left':'1px solid #f3f5f7',
            'border-right':'1px solid #f3f5f7'
        })

        $this.find('.dropdown-layer').css({
            display:'none'
        })