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次才能再次展开）

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

所以我还是返回了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这样就完成了