jQuery动态实现下拉菜单

<div class="row text-center">
  <div class="col MyList">
 <a class="done" data="pc">完成率</a><i class="icon ion-arrow-down-b"></i>
    <ul class="list_1">
      <img src="../../result/data/images/testimg/arrow.png" alt=""/>
      <li  data="pv" ng-click="test1('pv','客单数')">客单数</li>
      <li  data="pc" ng-click="test1('pc','销售额')">销售额</li>
      <li  data="sales" ng-click="test1('sales','转化率')">转化率</li>
    </ul>

  </div>
</div>

$('.MyList').on('click',function(){
    if ($('.list_1').is(':hidden')) {
        $('.list_1').show();
        $('.list_2').hide();
    } else {
        $('.list_1').hide();
    }
})

$(".text-center").on('click','.list_1 li',function(){
    var data = $(this).attr("data");
    var txt = $(this).text();
    var index = $(".list_1 li").index(this);
    $('.list_1').append("<li  data='pc' ng-click='test1(\""+$(".done").attr("data")+"\",\'"+$(".done").text()+"\')'>"+$(".done").text()+"</li>");
    $('.done').text(txt).attr("data",data);
    $('.list_1 li')[index].remove();
})

转载于:https://www.cnblogs.com/cxylpf/p/5089644.html