More than one css class clickable in javascript

Question

How can I do so that even \"toggle_cart\" is clickable in the same way as \"clickerHeader\" but retains its hover effect (see arrow)?

please see http://jsfiddle.net/real

Answer 1

In the CSS add:

.eventMenu:hover .no-js .contentHolderHeader {
    display: block;
}

Also add a display: none to div.eventMenu .contentHolderHeader.

Replace the JS with:

$('.eventMenu > ul').toggleClass('no-js js');
$(".toggle_cart").click(function(e){
    $(".contentHolderHeader").slideToggle();
    e.stopPropagation();
});
$(".eventMenu").click(function(e){
    e.stopPropagation();
});
$(document).click(function(){ 
    $(".contentHolderHeader").slideUp();
});

Remove the inner ul in the HTML.

Tested with/without JS: http://jsfiddle.net/vuF9n/2/