欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery实现点击除元素外元素管理元素内元素css(+同一元素点击2次不同效果)

程序员文章站 2022-05-24 15:43:23
...

需要实现如下功能

jquery实现点击除元素外元素管理元素内元素css(+同一元素点击2次不同效果)

可以看到我点击我的课程出现下拉菜单,点击下拉菜单收回,点击外部元素也收回,那么是怎么实现的呢?

先看html和css

<div class="content-left-title">
    我的课堂
    <div class="select-btnclass">
        <button class="btn">
            <span>全部课程</span>
            <i class="i-icon i-icon-arrow-down"></i>
        </button>
            <ul class="select-menu" style="display: none; height: 135px; transition: height 50ms;">
                <li data-type><a href="#">全部课程 </a></li>
                <li data-type="1"><a href="#">正在学习</a></li>
                <li data-type="2"><a href="#">过期课程</a></li>
                <li data-type="3"><a href="#">休学</a></li>
                <li data-type="4"><a href="#">隐藏课程</a></li>
            </ul>
        </div>
    </div>

css写一点jQuery中用到的css其余的没有点击情况下的css可以自己设置

/*首先为('.content-left-title')加一个opens样式但是一开始不没有opens的需要用jQuery加载*/
.content-left-title .opens{
    border-radius: 0;
}

/*为button加有opens前提下的样式*/
.select-btnclass.opens .btn {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #4cc5cd;
}
/*同样*/
.select-btnclass.opens .i-icon-arrow-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

接下来就是jQuery了

一开始我想到了toggle就这样写了

$('.main-content .content-left .select-btnclass').toggle(
    function(){
        $('.select-btnclass').addClass('opens')
        $('.select-menu').css('display','block')
    },function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
})
    $(document).click(function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
    })
   
    $('.select-menu li').click(function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
        var vals = $(this).children('a').html()
        $('.select-btnclass .btn span').html(vals)
    })

结果出现了这样的悲剧(展开后点击外部元素后,要点2次才能再次展开)

jquery实现点击除元素外元素管理元素内元素css(+同一元素点击2次不同效果)

那么是什么原因呢?(请看W3c http://www.w3school.com.cn/jquery/event_toggle.asp

jquery实现点击除元素外元素管理元素内元素css(+同一元素点击2次不同效果)

所以我还是返回了click 采用if-else

$('.main-content .content-left .select-btnclass').click(function(){
        if($('.select-btnclass').hasClass('opens')){
            $('.select-btnclass').removeClass('opens')
            $('.select-menu').css('display','none')
            }
        else{
            $('.select-btnclass').addClass('opens')
            $('.select-menu').css('display','block')
            }
    })

    $(document).click(function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
    })
    $('.select-menu li').click(function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
        var vals = $(this).children('a').html()
        $('.select-btnclass .btn span').html(vals)
    })

但是发现点击元素没反应这主要是我用了这个

$(document).click(function(){
        $('.select-btnclass').removeClass('opens')
        $('.select-menu').css('display','none')
    })

他把(我的点击的元素也包含进去了,所以我门要去除这个)冒泡事件

加上这个代码

$('.select-btnclass').click(function(e){
        e.stopPropagation()
    })

需要注意的是

 $('.select-menu li').click(function(){
        //下面这2行需要注释掉
        // $('.select-btnclass').removeClass('opens')
        // $('.select-menu').css('display','none')
        var vals = $(this).children('a').html()
        $('.select-btnclass .btn span').html(vals)
    })

OK这样就完成了