下拉菜单 插件

html

                       <div class="dropdown">
                            <a href="javascript:void(0)" onclick="showchange(event)" class="dropBox pointer"><font class="showValue">南昌</font><em class="chevIco"><i class="layui-icon">&#xe61a;</i></em></a>
                            <div class="h_City  hideSub" style="display:none">
                                <ul>
                                    <li onclick="changeclick(this)" name="广东">广东</li>
                                    <li onclick="changeclick(this)" name="广西">广西</li>
                                    <li onclick="changeclick(this)" name="山西">山西</li>
                                    <li onclick="changeclick(this)" name="内蒙古">内蒙古</li>
                                    <li onclick="changeclick(this)" name="杭州">杭州</li>
                                    <li onclick="changeclick(this)" name="南昌">南昌</li>
                                </ul>
                            </div>
                        </div>

 

js

 /* 点击显示隐藏 */
    function showchange(e){
        var e=window.event||e; //消除浏览器差异 
        var $this=$(e.target).closest("a"); 
        if (!$this.closest(".hideSub").length) {
            $this.parent().find(".hideSub").toggle()
            var showType=$this.parent().find(".hideSub").css("display")
            showType=="none"?$this.removeClass("chevdown"):$this.addClass("chevdown");
            e.stopPropagation();
            e.preventDefault();
        }
    }
    /* 切换时 */
    function changeclick(str){
        var $this=$(str);
        $this.addClass("current").siblings(".hideSub li").removeClass("current");
        var values=$this.attr("name");
        $this.closest(".dropdown").find(".showValue").html(values)
        $this.closest(".hideSub").hide();
        $this.closest(".dropdown").find(".dropBox").removeClass("chevdown")
    }
    /* 关闭时*/
    function closeDrop(){
        var nums=$("body").find(".hideSub").length;
        for(var i=0;i<=nums;i++){
            var $drop=$("body").find(".dropdown").eq(i);
            $drop.find(".dropBox").removeClass("chevdown");
            $drop.find(".hideSub").hide();

        }
        console.log("nums:"+nums)
    }

点击任意地方下拉消失

/*  点击任意地方下拉消失*/
    $("body").click(function(e){
        e=window.event||e; //消除浏览器差异
        if (!$(e.target).closest(".hideSub").length) {
            closeDrop();
            //$(".hideSub").hide();
        }
    })

css

/* 下拉菜单*/
.dropdown em{
  font-style: normal;
}
.dropdown .pointer {
  display: inline-block;
  min-width: 60px;
}
.dropdown{
  height: 36px;
  line-height: 36px;
  position: relative;
}

.dropdown i.iconfont{
    font-size: 18px;
}
.dropdown i.layui-icon{
  font-size: 13px;
  margin: 0px 5px;
  color: #a1a1a1;
}
.chevIco{
  display: inline-block;
  transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform-origin: 50% 50% 0;
  transition: transform .2s ease-in 0s;
}

  .chevdown .chevIco{
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform-origin: 50% 50% 0;
  transition: transform .2s ease-in 0s;
  }

  .hideSub{
    width: 100px;
    position: absolute;
    background-color: #FFF;
    height: auto;
    min-width: 104%;
    left: -2px;
    border: 1px solid #DDD;
    webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    z-index: 500;
    display: none;
    font-size: 13px;
    border-radius: 3px;
  }
  

  .hideSub li{
    text-align: center;
    cursor: pointer;

  }
  .hideSub li.current{
    background: #058b00;
    color: #FFF;
  }
  .hideSub li:not(.current):hover{
    background: #EEE;
  }

 

<divclass="dropdown fl">

                            <ahref="javascript:void(0)"onclick="showchange(event)"class="dropBox pointer"><fontclass="showValue">南昌</font>

<emclass="chevIco"><iclass="layui-icon">&#xe61a;</i></em></a>

                            <divclass="h_City hideSub"style="display:none">

                                <ul>

                                    <lionclick="changeclick(this)"name="广东">广东</li>

                                    <lionclick="changeclick(this)"name="广西">广西</li>

                                    <lionclick="changeclick(this)"name="山西">山西</li>

                                    <lionclick="changeclick(this)"name="内蒙古">内蒙古</li>

                                    <lionclick="changeclick(this)"name="杭州">杭州</li>

                                    <lionclick="changeclick(this)"name="南昌">南昌</li>

                                </ul>

                            </div>

                        </div>