Question

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

我试过了：

Combine hover and click functions (jQuery)?

$(document).ready(function(){

$('#cart-target, #shoppingBag').hover(function() {
    $('#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() {
    // on mouseout, reset the background colour
    $('#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').toggle(function () {
    $('#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 () {
    $('#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'); 
});

});

Answer 1

我建议使用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.myhoverclass,
.overlay.myhoverclass {
    visibility: visible;
    opacity: 1;
}

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

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

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

Answer 2

确定你可以

$(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);    
});

Answer 3

简化此代码： [add please]

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

简化此代码：

3 个答案: