Question

我怎么能这样做甚至“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();
                }
            });

Answer 1

只需将两个元素包装在div中.. http://jsfiddle.net/STE48/5/

Answer 2

在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/

Answer 3

对现有代码的最小更改是在点击功能的第一行之后添加以下两行：

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.

演示：http://jsfiddle.net/STE48/6/

在javascript中可以点击多个css类

3 个答案: