在javascript中可以点击多个css类 [英] More than one css class clickable in javascript

问题描述

我怎么能这样做甚至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（ ）; 
}否则if（！$（$ elem）.parents（'。contentHolderHeader'）。length）{
 //} else {
 $（'。eventMenu .js ul' ）.hide（）; 
} 
}）; 
  

解决方案

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

  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/

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();
                }
            });

解决方案

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/

这篇关于在javascript中可以点击多个css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！