自写简单下拉列表

<!--统计-->

< div class= "statistics" >

统计 < span class= "xia" ></ span >

< div class= "statistics-content" >

< ul >

< li >< i ></ i >统计图表 </ li >

< li >< b ></ b >热力图 </ li >

</ ul >

< s ></ s >

</ div >

</ div >

<!--图组-->

< div class= "show-info" >

< div >

< div class= "show-info-content" >

显示 < span class= "xia" ></ span >

< div class= "content-detail" >

< ul >

< li >统计图表 </ li >

< li >热力图 </ li >

</ ul >

< s ></ s >

</ div >

</ div >

< b >< img src= "./img/Audio---mute.png" ></ b >

< b >< img src= "./img/Refresh.png" ></ b >

< b >< img src= "./img/Expand---alt.png" ></ b >

</ div >

</ div >

CSS

#allmap,body,html{ overflow: hidden; margin: 0; width: 100%; height: 100%; font-family: "微软雅黑"}

#allmap{ position: relative; z-index: -1}

body{ position: relative}

.anchorBL{ display: none !important}

.BMap_omCtrl{ display: none !important}

.BMap_noprint.anchorBL{ display: none !important}

.day-time{ position: absolute; top: 20px; z-index: 6666; box-sizing: border-box; margin-left: 50%; width: 280px; height: 37px; border: 1px solid #5284FF; border-radius: 4px; background: rgba( 255, 255, 255, .7); line-height: 35px; transform: translate( -50%)}

.day-time> div{ height: 30px; text-align: center}

.day-time> div span{ display: inline-block; width: 23%; height: 30px; border-right: 1px solid; color: #fff; text-align: center; line-height: 30px}

.day-time> div span:last-child{ border-right: 0}

.day-time> div span:hover{ cursor: pointer}

*{ margin: 0; padding: 0}

li,ol,ul{ list-style: none}

.statistics{ position: absolute; top: 20px; right: 235px; display: inline-block; margin-left: 40px; width: 70px; height: 36px; border: 1px solid #C9CCD1; border-radius: 4px; background: rgba( 255, 255, 255, .95); text-align: center; line-height: 36px}

.show-info-wai{ position: absolute; top: 20px; right: 155px; display: inline-block; margin-left: 40px; width: 70px; height: 36px; border: 1px solid #C9CCD1; border-radius: 4px; background: rgba( 255, 255, 255, .95); text-align: center; line-height: 36px}

.statistics:hover{ cursor: pointer}

.show-info-content,.statistics-content{ position: relative; right: 27px; display: none; margin-top: 10px; padding: 5px; width: 95px; height: 60px; border-radius: 4px; background: rgba( 255, 255, 255, .95)}

.statistics-content li i{ display: inline-block; margin-right: 10px; width: 17px; height: 17px; background-image: url( ./img/icon_tongjitu.png); vertical-align: middle}

.statistics-content li:first-child{ border-bottom: 1px solid #EAEDF2}

.statistics-content li b{ display: inline-block; margin-right: 10px; width: 17px; height: 15px; background-image: url( ./img/icon_relitu.png); vertical-align: middle}

.statistics-content li{ height: 27px; text-align: left; line-height: 27px}

.statistics-content ul li:hover{ background: #D3D7D3}

.show-info-content s,.statistics-content s{ position: absolute; top: -10px; right: 5px; display: inline-block; border: 5px solid transparent; border-bottom-color: #F9FAFB}

.show-info{ position: absolute; top: 20px; right: 20px; box-sizing: border-box; width: 205px; height: 36px; border: 1px solid #C9CCD1; border-radius: 4px; background: rgba( 255, 255, 255, .95)}

.show-info> div{ width: 100%; height: 35px; line-height: 35px}

.show-info-content{ position: relative; top: -10px; left: -1px; float: left; display: inline-block; width: 70px; height: 32px; border-radius: 4px; background: rgba( 255, 255, 255, .95); text-align: center; line-height: 28px}

.xia{ position: relative; top: -3px; display: inline-block; border: 5px solid transparent; vertical-align: middle; border-bottom-color: #939FB8}

.shang{ position: relative; top: 0; display: inline-block; border: 5px solid transparent; vertical-align: middle; border-top-color: #939FB8}

.content-detail{ position: relative; right: 27px; display: none; margin-top: 10px; padding: 5px; width: 95px; height: 60px; border-radius: 4px; background: rgba( 255, 255, 255, .95)}

.show-info b{ display: inline-block; width: 40px; height: 35px; border-left: 1px solid #EAEDF2; text-align: center}

.show-info-content:hover{ cursor: pointer}

.show-info b{ cursor: pointer}

JS

$( '.statistics'). click( function () {

$( '.statistics-content'). toggle();

$( ".statistics span:first-child"). toggleClass( "xia"). toggleClass( "shang");

})

$( '.show-info-content'). click( function () {

$( '.content-detail'). toggle();

$( ".show-info-content span:first-child"). toggleClass( "xia"). toggleClass( "shang");

})