前言

最近公司的项目转向使用Hbuilder开发移动端项目，其中想要通过在顶部标题栏加入弹出菜单的方式，来定位长列表的位置，如图所示。

问题

Mui的功能貌似还不是很完善，在使用这个弹出菜单的时候，发现了一些很尴尬的问题：

1. 目录的跳转我是通过锚点实现的，但是在跳转之前，这个菜单一切正常，一旦触发跳转，那么整个菜单就会卡住无法收回，但是跳转功能正常。

2. 由于我的页面比较长，因而出现不在顶部使用弹出菜单时，弹出菜单位置像是不正确的情况，如图所示。

   

解决办法

1.问题一的解决方案

对于问题一，我的解决方案是手动关闭弹出菜单，这里通过控制台查找出生成的mask的class .mui-backdrop以及弹出菜单项的class .mui-table-view-cell代码如下：

//点击mask的触发事件$(".mui-backdrop").click(function() {    $("#topPopover").hide();    $(".mui-backdrop").hide();});//点击菜单项的触发事件$(".mui-table-view-cell").click(function() {    $("#topPopover").hide();    $(".mui-backdrop").hide();});

虽然方法比较粗暴，但是可以解决这个问题，有更好的解决方案的希望能够指正。

2.问题二的解决方案

对于问题二，我的解决方案是，将它定死~。 我通过使用js写入css样式，将其设为`absolute`即可解决。代码如下：

var uip = document.getElementById("topPopover"); //topPopover是popover 的最外层div    uip.style.position = "absolute";

代码

主页面代码如下所示：

        
    
            
                 
                 
     
xxx
    
    
    
    
        
         
    
    
        
    
        
     
        
     
            
      
                
       
                    
        
                        行政区划简介                    
                    
        
                        扶贫开发基本情况                    
                    
        
                        贫困户地域分布情况                    
                
       
            
      
        
     
    
    

解决以上两个问题的代码：

function setPopOverMenu() {    var uip = document.getElementById("topPopover");    uip.style.position = "absolute";    $(".mui-backdrop").click(function() {        $("#topPopover").hide();        $(".mui-backdrop").hide();    });    $(".mui-table-view-cell").click(function() {        $("#topPopover").hide();        $(".mui-backdrop").hide();    });}

欢迎访问 ,初来实习，多请帮助~