1

我使用 JQM 弹出窗口作为水平子菜单，如下图所示。通过单击第一个垂直按钮，将打开子菜单。

在此处输入图像描述

菜单按钮的大小不是固定的，而是设置为百分比，因为这个按钮可以适应视口高度（就像在 JQM Demo 中用于响应式 Listviews 一样）：

.menu .ui-listview li > .ui-btn {
    box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
    border-color: rgb(102,102,102);
    border-width: 1px;
    height: 100%;
    min-height: 32px;
    padding: 0; /* To make it small. */
}

现在，我很难将弹出窗口定位到我的主垂直菜单的右侧，因为默认情况下，弹出窗口将与原点重叠。

编辑： 这是一个 Javascript 可能的实现：

$("#left-sub-menu").on({
    popupbeforeposition: function(e, ui) {
        var px = $("#left-menu").outerWidth()           // left margin
                 + $(this).parent().outerWidth() / 2    // center of popup container
                 + 10;  // if left arrow, add default half arrow width  
        ui.x = px;
    }
});

但我问是否有使用标记数据位置的 CSS 解决方案。

我还尝试在垂直按钮附近使用宽度 = 200% 的隐藏 div，该按钮应充当“假原点”，以下是示例：

Plunker：https ://plnkr.co/edit/qmGhNqgww2mkKX1QywLH?p=preview

但是，弹出窗口的位置是相对于它的中心的，所以我总是需要知道子菜单中的项目数。

有人知道是否可以将 JQM 弹出窗口定位为与原点有一定百分比的偏移量？

4

0 回答 0