我怎么能这样做甚至“toggle_cart”可以像“clickerHeader”一样点击 但保留其悬停效果(见箭头)?
请参阅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();
}
});
答案 0 :(得分:0)
只需将两个元素包装在div中.. http://jsfiddle.net/STE48/5/
.
答案 1 :(得分:0)
在CSS中添加:
.eventMenu:hover .no-js .contentHolderHeader {
display: block;
}
同时将display: none
添加到div.eventMenu .contentHolderHeader
。
将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();
});
删除HTML中的内部ul
。
使用/不使用JS进行测试:http://jsfiddle.net/vuF9n/2/
答案 2 :(得分:0)
对现有代码的最小更改是在点击功能的第一行之后添加以下两行:
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
换句话说,如果单击带箭头的跨度,则假装实际上单击了锚元素。在上下文中:
$(document).on("click", function(e) {
var $elem = $(e.target);
if ($elem.hasClass('toggle_cart'))
$elem = $elem.next();
if ($elem.hasClass('clickerHeader')) {
// etc.