The following functions need to be realized

It can be seen that I click my course to display the pull-down menu, click the pull-down menu to withdraw, and click the external elements to withdraw, so how to achieve it?

First look at html and css

<div class="content-left-title">
    My classroom
    <div class="select-btnclass">
        <button class="btn">
            <span>All courses</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="#"> all courses</a></li>
                <li data-type="1"><a href="#"> Learning</a></li>
                <li data-type="2"><a href="#"> expired courses</a></li>
                <li data-type="3"><a href="#"> suspension</a></li>
                <li data-type="4"><a href="#"> Hide course</a></li>
            </ul>
        </div>
    </div>

css write a little bit of the css used in jQuery. You can set the rest of the css without clicking

/*First, add an opening style to ('. Content left title'), but at the beginning, if there is no need for opening, use jQuery to load*/
.content-left-title .opens{
    border-radius: 0;
}

/*Add the style of button under the premise of opening*/
.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;
}
/*same*/
.select-btnclass.opens .i-icon-arrow-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

Next up is jQuery

At first, I thought of toggle and I wrote it like this

$('.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)
    })

The result is such a tragedy (after expanding, click the external element, and then the key points can be expanded again 2 times)

So what's the reason? (see W3c http://www.w3school.com.cn/jquery/event_toggle.asp)

So I returned to click to use 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)
    })

But I found that the click element didn't respond. This is mainly because I used this

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

He included (my clicked elements, so we need to remove this) bubbling event

Add this code

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

It should be noted that

 $('.select-menu li').click(function(){
        //The next two lines need to be commented out
        // $('.select-btnclass').removeClass('opens')
        // $('.select-menu').css('display','none')
        var vals = $(this).children('a').html()
        $('.select-btnclass .btn span').html(vals)
    })

OK, that's it