Question

我对jQuery相对较新。

我想在图标旁边放置一个快捷菜单，但我似乎无法将其正确放置在图标旁边。
菜单根据图标所在的页面不断跳转。

以下是使用

的代码片段

var pos = $('i.moreactions').position();
var $menu = $('#shortcutmenu').show()
  .css({
    position: "absolute",
    left: getMenuPosition(pos.left, 'width', 'scrollLeft'),
    top: getMenuPosition(pos.top, 'height', 'scrollTop')
  });

  function getMenuPosition(elementpos, measure, scrollDir) {

    var win = $(window)[measure](),
    scroll = $(settings.menuSelector)[scrollDir](),
    menu = $(settings.menuSelector)[measure](),
    position = elementpos + scroll;

    // opening menu would pass the side of the page
    if (elementpos + menu > win && menu < elementpos)
      position -= menu;

    return position;
  }

指示HTML代码片段

    <div id="leads_wrapper" class="dataTables_wrapper no-footer">
    <table id="leads" width="100%" class="display dataTable no-footer" border="0" cellpadding="5" role="grid" style="width: 100%;">
<thead><tr class="header" role="row"><th align="left" class="sorting_desc" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-sort="descending" aria-label="No: activate to sort column ascending" style="width: 36px;">No</th><th align="left" class="sorting" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-label="Actions: activate to sort column ascending" style="width: 74px;">Actions</th><th align="left" class="sorting" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-label="Date Created: activate to sort column ascending" style="width: 118px;">Date Created</th><th align="left" class="sorting" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-label="Full Names: activate to sort column ascending" style="width: 166px;">Full Names</th><th align="left" class="sorting" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-label="Product: activate to sort column ascending" style="width: 134px;">Product</th><th align="left" class="sorting" tabindex="0" aria-controls="leads" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 65px;">Status</th></tr></thead><tbody><tr id="9" class="odd" align="left" role="row"><td class="sorting_1">
            <tr id="6" class="even" align="left" role="row">
                <td class="sorting_1">
                    <div style="width:100%;text-align:center">
                        <a href="http://localhost/esurance365ec/admin/quotes/edit/10">10</a>
                    </div>
                </td>
                <td><i class="moreactions fa fa-bars fa-lg" aria-hidden="true"></i></td>
                <td>2017-May-24</td>
                <td><a href="http://localhost/esurance365ec/admin/customers/show/6">Stanley Muchiri (New)</a></td>
                <td>Domestic Package</td><td>New</td>
            </tr>
        </tbody>
    </table>
    </div>

如果有任何用途，图标位于使用DataTables插件呈现的表格内

在使用DataTables插件呈现的表中使用jQuery定位图标旁边的快捷菜单

0 个答案: