More than one css class clickable in javascript

∥☆過路亽.° 提交于 2020-01-11 13:59:48

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!