[英]More than one css class clickable in javascript
How can I do so that even "toggle_cart" is clickable in the same way as "clickerHeader" but retains its hover effect (see arrow)? 如何才能使“ toggle_cart”与“ clickerHeader”一样可单击,但仍保持其悬停效果(请参见箭头)?
please see http://jsfiddle.net/realitylab/STE48/3 请参阅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();
}
});
只需将两个元素都包装在div中即可。http://jsfiddle.net/STE48/5/
.
In the CSS add: 在CSS中添加:
.eventMenu:hover .no-js .contentHolderHeader {
display: block;
}
Also add a display: none
to div.eventMenu .contentHolderHeader
. 还要添加一个
display: none
div.eventMenu .contentHolderHeader
display: none
。
Replace the JS with: 将JS替换为:
$('.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. 删除HTML中的内部
ul
。
Tested with/without JS: http://jsfiddle.net/vuF9n/2/ 使用/不使用JS进行测试: http : //jsfiddle.net/vuF9n/2/
A minimal change to your existing code is to add the following two lines after the first line of your click function: 现有代码的最小变化是在click函数的第一行之后添加以下两行:
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/ 演示: http : //jsfiddle.net/STE48/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.