解決Mui中popover 頂部彈出菜單彈出位置不准確以及無法收回的問題

前言

最近公司的項目轉向使用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";

代碼

主頁面代碼如下所示：

    <!--頭部-->
    <div class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover"></a>
            <h1 class="mui-title" id="cityResult" class="" type='button'>xxx</h1>
    </div>
    <div class="mui-content">
        <!--體，省略-->
    </div>
    <!--右上角彈出菜單-->
    <div id="topPopover" class="mui-popover">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#c1">行政區划簡介</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#c2">扶貧開發基本情況</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#c3">貧困戶地域分布情況</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

解決以上兩個問題的代碼：

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();
    });
}

歡迎訪問zhkmxx930的博客 ,初來實習，多請幫助~