问题
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/realitylab/STE48/3
$('.eventMenu > ul').toggleClass('no-js js');
$('.eventMenu .js ul').hide();
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('clickerHeader')) {
$('.eventMenu .js ul').not($elem.next('ul')).hide();
$elem.next("ul").slideToggle();
} else if (!$($elem).parents('.contentHolderHeader').length) {
//} else {
$('.eventMenu .js ul').hide();
}
});
回答1:
Just wrap both elements in a div .. http://jsfiddle.net/STE48/5/
.
回答2:
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/
回答3:
A minimal change to your existing code is to add the following two lines after the first line of your click function:
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
In other words, if the span with the arrow is clicked, pretend that actually the anchor element was clicked. In context:
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
if ($elem.hasClass('clickerHeader')) {
// etc.
Demo: http://jsfiddle.net/STE48/6/
来源:https://stackoverflow.com/questions/20932571/more-than-one-css-class-clickable-in-javascript