使用jquery切换.active类 [英] Toggle .active class with jquery

查看：106
本文介绍了使用jquery切换.active类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图用jquery切换class .active ，继承人到目前为止：




< div class =download-button-wrapper>
< div id =ddclass =desktopBackground downloadFontIconstabindex =1> DESKTOP
< ul class =dropdown>
< li>< a href =＃> 2560 x 1440< / a>< / li>
< li>< a href =＃> 1800 x 900< / a>< / li>
< / ul>
< / div>
< / div>

< div class =download-button-wrapper>
< div id =declass =tabletBackground downloadFontIconstabindex =1> PHONE
< ul class =dropdown>
< li>< a href =＃> 640 x 960< / a>< / li>
< li>< a href =＃> 1136 x 640< / a>< / li>
< li>< a href =＃> 720 x 1280< / a>< / li>

< / ul>
< / div>
< / div>


< div class =download-button-wrapper>
< div id =dfclass =phoneBackground downloadFontIconstabindex =1> TABLET
< ul class =dropdown>
< li>< a href =＃> 2560 x 1600< / a>< / li>
< li>< a href =＃> 2048 x 1536< / a>< / li>
< / ul>
< / div>
< / div>
< div style =clear：both>< / div>
< / div>

css 

  .downloadButtons {
 display：block; 
 width：780px; 
 height：200px; 
 margin-left：40px; 
 margin-top：30px; 
 
 $ b $ * GLOBALS  - 下拉菜单* / 
 .downloadFontIcons {
 / *大小和位置* / 
位置：相对; / *为子元素和伪元素启用绝对定位* / 
 width：184px; 
 height：44px; 
 margin：0 auto; 
 text-align：center; 
 line-height：44px; 
 margin-right：68px; 
 font-size：.7em; 
颜色：＃9ea7b3; 
背景颜色：＃F9FAFC; 
光标：指针; 
概述：无; 
 border：1px solid＃eaedf1; 
} 
 .downloadFontIcons .dropdown {
 / *尺寸&位置* / 
位置：绝对; 
 top：110％; 
 left：0px; 
 right：0px; 
 
 / *样式* / 
背景：白色; 
 -webkit-transition：全部0.3s缓解; 
 -webkit-transition-delay：0s; 
 -moz-transition：全部0.3s缓解; 
 -moz-transition-delay：0s; 
 -ms-transition：全部0.3s缓解; 
 -o-transition：全部0.3s缓解; 
 -o-transition-delay：0s; 
过渡：所有0.3s缓解; 
 transition-delay：0s; 
 list-style：none; 
 
 / *隐藏* / 
不透明度：0; 
 pointer-events：none; 
} 
 
 :: selection {
 background：transparent; 
} 
 
 ::  -  moz-selection {
 background：transparent; 
} 
 
 .download-button-wrapper {
 * zoom：1; 
 float：left; 
} 
 
 .downloadFontIcons .dropdrop li a {
 display：block; 
 height：44px; 
 text-decoration：none; 
颜色：＃9ea7b3; 
 -webkit-transition：全部0.3s缓解; 
 -webkit-transition-delay：0s; 
 -moz-transition：全部0.3s缓解; 
 -moz-transition-delay：0s; 
 -ms-transition：全部0.3s缓解; 
 -o-transition：全部0.3s缓解; 
 -o-transition-delay：0s; 
过渡：所有0.3s缓解; 
 transition-delay：0s; 
} 
 
 
 / *悬停状态* / 
 .downloadFontIcons .dropdown li：悬停{b $ b color：#FFFFFF; 
背景颜色：＃FF562A; 
} 
 
 / *活动状态* / 
 
 .downloadFontIcons.active .dropdown {
 opacity：1; 
 pointer-events：auto; 
} 
 
 / *没有CSS3支持* / 
 
 .no-opacity .downloadFontIcons .dropdown，
 .no-pointerevents .downloadFontIcons .dropdown { 
 display：none; 
 opacity：1; / *如果不透明度支持但不支持指针事件* / 
 pointer-events：auto; / *如果指针事件支持但没有指针事件支持* / 
} 
 
 .no-opacity .downloadFontIcons.active .dropdown，
 .no-pointerevents .downloadFontIcons。 active .dropdown {
 display：block; 
}

js $ b 

 函数DropDown（el）{
 this.dd = el; 
 this.initEvents（）; 
} 
 DropDown.prototype = {
 initEvents：function（）{
 var obj = this; 
 $ b obj.dd.on（'click'，function（event）{
 $（this）.toggleClass（'active'）; 
 event.stopPropagation（）; 
}）; 
 
 
 
 $（function（）{
 
 var dd = new DropDown（$（'＃dd'））; 
 
 $（document）.click（function（）{
 // all dropdowns 
 $（'。wrapper-dropdown-2'）。removeClass（'active'）; 
}）; 
 
}）; 
 
 
 $ b $（function（）{
 
 var de = new DropDown（$（'＃de'））; 
 
 $（document）.click（function（）{
 // all dropdowns 
 $（'。wrapper-dropdown-2'）。removeClass（'active'）; 
} ）; 
 
}）; 
 $ b $（函数（）{
 
 var df = new DropDown（$（'＃df'））; 
 
 $（document）。 click（function（）{
 // all dropdowns 
 $（'。wrapper-dropdown-2'）。removeClass（'active'）; 
}）; 
 
}）;

jsFiddle



我需要切换按钮的活动状态，例如当我点击桌面时按钮出现下拉列表，然后当我点击手机按钮时，我想让桌面列表为消失。我认为需要对代码的这部分进行更改，因为我认为我只针对 dd 元素：

 函数DropDown（el）{
 this.dd = el; 
 this.initEvents（）; 
} 
 DropDown.prototype = {
 initEvents：function（）{
 var obj = this; 
 $ b obj.dd.on（'click'，function（event）{
 $（this）.toggleClass（'active'）; 
 event.stopPropagation（）; 
}）; 
} 
}

我对JavaScript的知识知之甚少，所以不确定是什么做到。需要您的帮助。

解决方案

在 initEvents 函数中，您可以查找并删除按钮上的所有活动类，不包括点击的按钮。这应该给你你想要的功能。

  initEvents：function（）{
 var obj = this; 
 $ b obj.dd.on（'click'，function（event）{
 $（'。active'）。not（$（this））。removeClass（'active'）; 
 $（this）.toggleClass（'active'）; 
 event.stopPropagation（）; 
}）; 
}

http://jsfiddle.net/UhSqd/1/


I'm trying to toggle the class .active with jquery, heres what I've got so far:

html

<div class="downloadButtons">
            <div class="download-button-wrapper">
                    <div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1440</a></li>
                            <li><a href="#">1800 x 900</a></li>
                        </ul>
                    </div>
            </div>

            <div class="download-button-wrapper">
                    <div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE
                        <ul class="dropdown">
                            <li><a href="#">640 x 960</a></li>
                            <li><a href="#">1136 x 640</a></li>
                            <li><a href="#">720 x 1280</a></li>

                        </ul>
                    </div>
            </div>  


            <div class="download-button-wrapper">
                    <div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1600</a></li>
                            <li><a href="#">2048 x 1536</a></li>
                        </ul>
                    </div>
            </div>
        <div style="clear:both"></div>
        </div>

css

.downloadButtons{
    display: block;
    width: 780px;
    height: 200px;
    margin-left: 40px;
    margin-top: 30px;
}

/* GLOBALS - Dropdowns*/
.downloadFontIcons{
    /* Size and position */
    position: relative; /* Enable absolute positionning for children and pseudo elements */
    width: 184px;
    height: 44px;
    margin: 0 auto;
    text-align: center;
    line-height: 44px;
    margin-right: 68px;
    font-size: .7em;
    color: #9ea7b3;
    background-color: #F9FAFC;
    cursor: pointer;
    outline: none;
    border: 1px solid #eaedf1;
}   
.downloadFontIcons .dropdown{
    /* Size & position */
    position: absolute;
    top: 110%;
    left: 0px;
    right: 0px;

    /* Styles */
    background: white;
    -webkit-transition: all 0.3s ease-out;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.3s ease-out;
    -moz-transition-delay: 0s;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -o-transition-delay: 0s;
    transition: all 0.3s ease-out;
    transition-delay: 0s;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

::selection {
    background: transparent; 
}

::-moz-selection {
    background: transparent; 
}

.download-button-wrapper {
    *zoom: 1;
    float: left;
}

.downloadFontIcons  .dropdown li a {
    display: block;
    height: 44px;
    text-decoration: none;
    color: #9ea7b3;
    -webkit-transition: all 0.3s ease-out;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.3s ease-out;
    -moz-transition-delay: 0s;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -o-transition-delay: 0s;
    transition: all 0.3s ease-out;
    transition-delay: 0s;
}


/* Hover state */
.downloadFontIcons .dropdown li:hover a {
    color: #FFFFFF;
    background-color:#FF562A;
}

/* Active state */

.downloadFontIcons.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .downloadFontIcons .dropdown,
.no-pointerevents .downloadFontIcons .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .downloadFontIcons.active .dropdown,
.no-pointerevents .downloadFontIcons.active .dropdown {
    display: block;
}

js

       function DropDown(el) {
                this.dd = el;
                this.initEvents();
            }
            DropDown.prototype = {
                initEvents : function() {
                    var obj = this;

                    obj.dd.on('click', function(event){
                        $(this).toggleClass('active');
                        event.stopPropagation();
                    }); 
                }
            }

            $(function() {

                var dd = new DropDown( $('#dd') );

                $(document).click(function() {
                    // all dropdowns
                    $('.wrapper-dropdown-2').removeClass('active');
                });

            });



            $(function() {

                var de = new DropDown( $('#de') );

                $(document).click(function() {
                    // all dropdowns
                    $('.wrapper-dropdown-2').removeClass('active');
                });

            });

            $(function() {

                var df = new DropDown( $('#df') );

                $(document).click(function() {
                    // all dropdowns
                    $('.wrapper-dropdown-2').removeClass('active');
                });

            });

jsFiddle

I need to toggle the active state of the buttons, for example as I click on the desktop button the dropdown list appears, then when I click on the phone button, I want the desktop list to disappear. I think the changes needed to be on this part of the code as with this code I think I'm only targeting dd elements:

function DropDown(el) {
  this.dd = el;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;

    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      event.stopPropagation();
    });
  }
}

I have very little knowledge of javascript so not sure what do to. Need your help.

解决方案

In your initEvents function you can look for and remove all active classes on your buttons excluding the clicked button. That should give you the functionality your looking for.

initEvents : function() {
  var obj = this;

  obj.dd.on('click', function(event){
    $('.active').not($(this)).removeClass('active');
    $(this).toggleClass('active');
    event.stopPropagation();
  });
}

http://jsfiddle.net/UhSqd/1/

这篇关于使用jquery切换.active类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆