技術標籤：JQuery

html

<div class="head-cont">
                        <div class="head-tit head-titA">切換資料庫</div>
                        <div class="head-item">
                                <a class="_p">123</a>
                                <a class="_p">456</a>
                                <a class="_p">789</a>
                                <a class="_p">食品貴伐判定結束系統</a>
                        </div>
                    </div>
 

css

.head-tit{
        background: #2469b7;
        color: #fff;
        border-radius: 5px;
        padding: 5px 30px 5px 20px;
        line-height: 28px;
        position: relative;
        cursor: pointer;
    }
    .head-titA::after{
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        bottom: 40%;
        right: 10px;
        border: solid transparent 0.6rem;
        border-bottom-color: #fff;
        -webkit-transform: rotate(180deg) translateY(-50%);
        transform: rotate(180deg) translateY(-50%);
        }
    .head-titB::before {
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        bottom: 40%;
        right: 10px;
        border: solid transparent 0.6rem;
        border-bottom-color: #fff;
        }
      .head-item{
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        z-index: 999;
        box-shadow: 1px 1px 5px #dde4ec;
        display: none;
      }  
      .head-item ._p{
          line-height: 38px;
          padding: 0 12px;
          border-bottom: 1px solid #ececec;
          box-sizing: border-box;
          margin: 0;
          display: block;
      }
      .head-item ._p:last-child{
        border-bottom: none;
      }
      .head-item ._p:hover{
        color: #2469b7;
        cursor: pointer;
      }
      .head-item ._p:hover::before{
        content: '';
        position: absolute;
        height: 38px;
        display: block;
        border-left: 4px solid #2469b7;
        left:0
      }
 

jq

$(function(){
        $('.head-tit').on('click',function(event){
            $('.head-item').toggle();
            event.stopPropagation(); 
            if($(this).hasClass("head-titA")){
    　　　　　　$(this).removeClass("head-titA").addClass("head-titB");
    　　　　　}else{
    　　　　　　$(this).removeClass("head-titB").addClass("head-titA");
    　　　　　}
        })
        $(document).click(function(e){  
            $(".head-item").hide();
        });  

    })