bootstrap中popover.js

最新推荐文章于 2020-12-29 00:14:09 发布

qq_42041288

最新推荐文章于 2020-12-29 00:14:09 发布

阅读量402

点赞数

本文介绍了一个使用JavaScript和jQuery实现的用户导航菜单，包括个人中心、上传视频和观看记录等功能，通过鼠标悬停触发显示和隐藏。

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

<div style="font-size:14px;margin-top:10px;">  
    <span>用户名：王荣晓</span>  
    <a id="topdaohang" target="_blank" >[外链图片转存失败(img-VmhEi9c0-1562226724120)(https://mp.youkuaiyun.com/dmsd-itoo-video-web/images/dribbble.png)]  
    </a>  
<div class="header-top-right">  
        <script type="text/javascript">  

        $(function (){   
            var ulstring="<ul id='sss' style='width:150px;top: 50px;'>"  
                +"<a style='margin-left:-20px;'>[外链图片转存失败(img-BIPLYaQi-1562226724122)(https://mp.youkuaiyun.com/dmsd-itoo-video-web/images/gerenzhongxin.png)]个人中心</a><br>"  
                +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
                +"<a href='/dmsd-itoo-video-web/upload/showPage' style='margin-left:-20px;'>[外链图片转存失败(img-nzwk6W3f-1562226724126)(https://mp.youkuaiyun.com/dmsd-itoo-video-web/images/shangchuanshipin.png)]上传视频</a><br>"  
                +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
                +"<a href='/dmsd-itoo-video-web/historyRecord/historyRecordInfo' style='margin-left:-20px;'>[外链图片转存失败(img-ZjLiNAX8-1562226724127)(https://mp.youkuaiyun.com/dmsd-itoo-video-web/images/guankanjilu.png)]观看记录</a><br>"  
                +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
                +"</ul>";  
            $("#topdaohang").popover({   
                trigger:'manual',//manual 触发方式  
                placement : 'bottom',    
                title:'<div style="text-align:left; color:gray; font-size:12px;">用户名称</div>',  
                html: 'true',   
               container:'body',
                content : ulstring,  //这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；  
                animation: false  
            }) .on("mouseenter", function () {  
                        var _this = this;  
                        $(this).popover("show");  
                        $(this).siblings(".popover").on("mouseleave", function () {  
                            $(_this).popover('hide');  
                        });  
                    }).on("mouseleave", function () {  
                        var _this = this;  
                        setTimeout(function () {  
                            if (!$(".popover:hover").length) {  
                                $(_this).popover("hide")  
                            }  
                        }, 100);  
                        });    
        });  
       </script>  
        
</div>