css - 当列表变大时，上下文菜单不会显示在正确的位置

Question

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $("body").on("contextmenu", "table tbody button", function(e) {
    $(".contextMenu").hide();
    $(this).parent().find('.contextMenu').css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });
    return false;
  });
  $(".contextMenu").on("click", "a", function() {
    $(this).hide();
  });

  $("html").click(function() {
    $(".contextMenu").hide();
  });
  $scope.nodes = [{
      "id": 228,
      "name": "Folder 1",
      "descr": "",
      "path": "227/",
      "mm": true
    },
    {
      "id": 229,
      "name": "Folder 2",
      "descr": "",
      "path": "227/",
      "mm": true
    }
  ];
  $scope.deleteFolder = function(detailid) {
    console.log(detailid);
    alert(detailid)
  };
});

.contextmenustyle {
  display: block;
  position: static;
}

.contextMenu {
  position: fixed;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class="table table-responsive table-hover" id="foldertable">
  <thead>
    <tr style="text-align: center">
      <th>Name</th>
    </tr>
  </thead>
  <tbody id="projtable">
    <tr ng-repeat="detail in nodes" ng-mouseover="showShare()">
      <td><button id="namesdetails" class="btn btn-link" ng-click="openFolder(detail.id, detail.name)" style="text-decoration: none !important">
                                    <span class="fa fa-folder" style="font-size: larger"></span> 
                                    {{detail.name}}</button>
        <div class="dropdown clearfix contextMenu">
          <ul class="dropdown-menu contextmenustyle" role="menu" aria-labelledby="dropdownMenu">
            <li><a tabindex="-1" ng-click="editFolderName(detail.id, detail.name)"><span class="glyphicon glyphicon-edit"></span> Edit/Rename</a></li>
            <li><a tabindex="-1" ng-click="deleteFolder(detail.id)"><span class="glyphicon glyphicon-remove"></span> Delete</a></li>
          </ul>
        </div>

        <!--            pop up to confirm  delete-->
        <div id="delModel" class="modal fade" role="dialog">
          <div class="modal-dialog  modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-body">
                <p>Are you Sure you want to Delete?</p>
                <div align="right">
                  <button type="button" class="btn btn-default" ng-click="okdelete()">Yes</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                </div>
              </div>
            </div>

          </div>
        </div>
        <!--            pop up to rename folder-->
        <div id="editFolder" class="modal fade" role="dialog">
          <div class="modal-dialog  modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-body">
                <input type="text" class="form-control" id="editfoldername" ng-model="editfoldername">
                <br>
                <div align="right">
                  <button type="button" class="btn btn-default" ng-click="updateName()">Update</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
              </div>
            </div>

          </div>
        </div>

      </td>



    </tr>

  </tbody>
</table>

有人可以建议我应该在上下文菜单的 CSS 中更改什么，这样即使列表更大，我也能看到菜单。当列表较小时，它对我来说很好用。附上图片。 红线显示了我点击的位置以及实际弹出菜单的位置。

.contextMenu {
  position: fixed;
  display:none;
}
.contextmenustyle
{
    display:block;position:static;margin-bottom:0px;
}

Answer 1

如果你分享完整代码，我可以帮你

试试这个。

.contextMenu {
  position: relative;
  display:none;
}
.contextmenustyle
{
    display:block;position:absolute;margin-bottom:0px;
}