Javascript 简化此代码：

我正在寻找简化此代码的最佳方法：
组合悬停和切换功能

我试过这个：

当然可以

$(document).ready(function() {  
    function change() {
        $('#shoppingBag, .overlay').css('visibility', 'visible');
        $('#shoppingBag, .overlay').css('opacity', '1');
        $('.icon-cart').css('color', '#cc181e');
        $('.toggle__shoppingbag').css('background-color', '#131418'); 
        $('.toolbar').css('background-color', '#0a0a0c'); 
    }

    function reset() {
        $('#shoppingBag, .overlay').css('visibility', 'hidden');
        $('#shoppingBag, .overlay').css('opacity', '0');
        $('.icon-cart').css('color', '#fff');
        $('.toggle__shoppingbag').css('background-color', 'transparent'); 
        $('.toolbar').css('background-color', '#131418'); 
    }

    $('#cart-target, #shoppingBag').hover(change, reset);
    $('#cart-target').toggle(change, reset);    
});

---

我建议使用CSS而不是JS进行样式设置：

$(function(){

    $('#cart-target, #shoppingBag').hover(function() {
        $('#shoppingBag, .overlay, .icon-cart, .toggle__shoppingbag, .toolbar').addClass('myhoverclass');
    }, function() {
        $('#shoppingBag, .overlay, .icon-cart, .toggle__shoppingbag, .toolbar').removeClass('myhoverclass');
    });

});

css

---

简化此代码：[请添加]

#shoppingBag, .overlay { visibility:hidden;visibility:hidden;opacity:0  }
body.shw #shoppingBag,body.shw .overlay {visibility:visible;opacity:1}

.icon-cart { color:#fff }
body.shw .icon-cart {color:#cc181e}

.toggle__shoppingbag { background-color:transparent }
body.shw .toggle__shoppingbag {background-color:#131418}
.toolbar { background-color:#131418 }
body.shw .toolbar {background-color:#0a0a0c}

---

您使用的jQuery版本是什么？当前版本的jQuery.wow中不再存在切换事件。我简直无语了。首先，将所有样式放在它们所属的css文件中。然后通过切换类来组合DOM元素的悬停事件和切换样式。这个问题似乎不在主题范围内，因为它似乎要求查看代码。

#shoppingBag.myhoverclass,
.overlay.myhoverclass {
    visibility: visible;
    opacity: 1;
}

.icon-cart.myhoverclass {
    color: #cc181e;
}

.toggle__shoppingbag.myhoverclass {
    background-color: #131418;
}

.toolbar.myhoverclass {
    background-color: #0a0a0c;
}

#shoppingBag, .overlay { visibility:hidden;visibility:hidden;opacity:0  }
body.shw #shoppingBag,body.shw .overlay {visibility:visible;opacity:1}

.icon-cart { color:#fff }
body.shw .icon-cart {color:#cc181e}

.toggle__shoppingbag { background-color:transparent }
body.shw .toggle__shoppingbag {background-color:#131418}
.toolbar { background-color:#131418 }
body.shw .toolbar {background-color:#0a0a0c}

$('#cart-target, #shoppingBag').hover(function() {
    $('body').addClass('shw');
}, function() {
     $('body').removeClass('shw');
});