Easyui-tree 文本过长，鼠标悬停显示完整的信息

最新推荐文章于 2022-07-17 16:30:48 发布

Qiustion

最新推荐文章于 2022-07-17 16:30:48 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5+CSS3+JS

本文链接：https://blog.youkuaiyun.com/Qiustion/article/details/77593204

HTML5+CSS3+JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的树状菜单功能，当鼠标悬停在菜单项上时，如果显示的内容超过指定宽度，则会自动弹出一个提示框显示完整的文本。此功能通过计算节点宽度并判断是否超出容器范围来决定是否显示提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码：

$('#cTreeList7811q').tree({
  url:strUrl,  // 数据来源地址
  method:'post',
  animate:true,
  onLoadSuccess:function(node,data){
      $('#cTreeList7811q').on('mouseenter','span.tree-title',function(){
//      console.log($(this).text());
        var curZindex=$(this).parents('.window').css('z-index')+100;
        var itemTxt=$(this).text();
        var itemWidth=$(this).width()+4; // 4像素是padding的左右值各2
        var itemLeft=$(this).position().left; // node.text文本相对于父元素偏移多少
        var cTreeWidth=$('#cTreeList7811q').width();

        if((itemWidth+itemLeft)>cTreeWidth){
          if($('body').find('.tip').length!=0){
            $('body').find('.tip').remove();
        }else{
          var html='<div class="tip">'+itemTxt+'</div>';
            $('body').append(html);
            $('.tip').css({'top':$(this).offset().top+15,'left':$(this).offset().left,'z-index':curZindex});
        }            
        }
      });
      
      $('#cTreeList7811q').on('mouseleave','span.tree-title',function(){
        if($('body').find('.tip').length!=0){
        $('body').find('.tip').remove();
          }
      });
  },
  onLoadError:function(){
    showError("读取数据出错");
  }
});

鼠标悬停显示完整Tip是根据弹出窗口的宽度来计算