效果图:

thml :

<span class="list-menu">
  操作 +
  <ul class="menu">
    <li class="menu-item"><a href="">编辑</a></li>
    <li class="menu-item"><a href="">预览</a></li>
    <li class="menu-item"><a href="">领取</a></li>
    <li class="menu-item"><a href="">详情</a></li>
    <li class="menu-item read"><a href="">删除</a></li>
  </ul>
</span>

css:

.menu{position: fixed;background-color: #fff;border: 1px solid #83b266;z-index: 99;display: none;min-width: 100px;color: #4e4e4e;
-moz-box-shadow:0px 0px 3px #83b266;/*firefox*/
-webkit-box-shadow:0px 0px 3px #83b266;/*webkit*/
box-shadow:0px 0px 3px #83b266;/*opera或ie9*/ }
.menu .menu-item a{display: block;line-height: 26px;padding: 0 10px; color: inherit;min-width: max-content;text-align: left;border-bottom: 1px solid #e1e1e1;}
.menu .menu-item:last-child a{border-bottom: none;}
.menu .menu-item.read{color: #f65622;}
.menu .menu-item:hover{background-color: #c3dfb2;}
.list-menu.menu-active .menu{display: block;}

 

javascript :

依赖JQ

$(document).click(function(e){
  if(e.target.className.indexOf('list-menu') != -1){
    var that = $(e.target);
    var w = 0;
    var h = 0;
    if(that.hasClass('menu-active')){
      that.removeClass('menu-active');
    }else{
      $('.list-menu').removeClass('menu-active');
      that.addClass('menu-active');
    }

    if( ( $('.menu').width() + that.offset().left ) > $(window).width() ){
      w = that.offset().left-($('.menu').width()-that[0].offsetWidth+2);

    }else{
      w = that.offset().left;
    };

    if( ( $('.menu').height() + that.offset().top+that[0].offsetHeight - $(window).scrollTop() ) > $(window).height() ){
      h = that.offset().top-($('.menu').height()+2)- $(window).scrollTop();
    }else{
      h = that.offset().top+that[0].offsetHeight- $(window).scrollTop();
    }

    that.children('.menu').css({left: w, top: h})
  }else{
    $('.list-menu').removeClass('menu-active')
  }
})
$(window).scroll(function(){
  $('.list-menu').removeClass('menu-active')
})

 

posted on 2018-06-29 15:55  YC小杨  阅读(117)  评论(0编辑  收藏  举报