在父DIV外部打开自定义上下文菜单

问题描述

class Menu {
  constructor() {
    this.menu = document.querySelector('.menu');
    this.ellipsis = document.querySelector('.fa.fa-ellipsis-v');
    this.callEvent();
  }

  callEvent() {
    this.ellipsis.addEventListener('click',() => {
      $('.menu').toggleClass('show');
    });
  }
}

const menu = new Menu();

#parent-div{
border: 2px solid green;
}

.menu {
  display: none;
}

.show {
  display: flex;
  border: 2px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="parent-div"> 
<table>
<tbody>
<i class="fa fa-ellipsis-v"></i>
<div class="menu">
  <div id="context-menu">
     <a href="#" type="button">Item 1</a>
     <a href="#" type="button">Item 2</a>
     <a href="#" type="button">Item 3</a>
     <a href="#" type="button">Item 4</a>   
  </div>
</div>
<tbody>
</table>
</div>

我创建了一个自定义上下文菜单，并从其菜单项部分合并了Bootstraps下拉类。现在，我的上下文菜单在单击时可以正确打开和关闭，问题是上下文菜单正在更改其内部父级div的大小（可理解）。是否可以在父div的外部打开上下文菜单div，最好是在右侧稍微打开一点？

HTML

<div>
    <table id="my-table">
        <tbody>
        <tr>
            <td class="column-1"><h4></h4>
                <h5>
                    <a href="">Link 1</a>
                </h5>
                <p>September 17,2020 - September 24,2020</p>
            </td>
            <td class="column-2">
                <i class="fa fa-ellipsis-v pull-right" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                </i>
                <div class="menu dropdown show">
                    <div class="btn-group-vertical dropdown-menu" role="group" aria-labelledby="dropdownMenu2" style="">
                        <a href="#" type="button"
                          class="btn dropdown-item">Item 1</a>
                        <a href="#" type="button"
                           class="btn dropdown-item">Item 2</a>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

从上方提取上下文菜单html。这是我要在父div之外显示的菜单：

<div class="menu dropdown show">
    <div class="btn-group-vertical dropdown-menu"role="group" aria-labelledby="dropdownMenu2">
        <a href="#" type="button" class="btn dropdown-item">Item 1</a>
        <a href="#" type="button" class="btn dropdown-item">Item 2</a>
    </div>
</div>

JavaScript

class Menu {
    constructor() {
        this.menu = document.querySelector('.menu');
        this.ellipsis = document.querySelector('.fa.fa-ellipsis-v');
        this.callEvent();
    }

    callEvent() {
        this.ellipsis.addEventListener('click',this.showMenu.bind(this));
    }

    showMenu(e){
          e.preventDefault();
          $('.menu').toggleClass('show');
    }
}

var menu = new Menu();

CSS

.menu {
  display: none;
  position: relative;
}

.show {
  display: block;
}

解决方法

您只需要使用position: absolute来定位菜单，将父级的位置设置为position: relative。这将从文档流中删除菜单，并允许您使用top，bottom，left和right css属性相对于父级放置菜单。

我通过添加以下CSS编辑了您的代码段

#parent-div{
border: 2px solid green;

position: relative;     /* accommodates absolutely positioned children */
}

.show {
  display: flex;
  border: 2px solid;
  
  width: 80px;         /* set menu width */
  height: 60px;        /* set menu height */
  position: absolute;  /* position absolute relative to parent */
  bottom: -90px;       /* position the menu relative to parents bottom edge*/
}

const button = document.getElementById('toggle-absolute');

button.addEventListener('click',() => {
    const menu = document.getElementById('menu');
   menu.classList.toggle('absolute');
  });

.container {
  background: aquamarine;
  position: relative;
  height: 50vh;
  width: 50vw;
}

#menu {
  padding: 8px;
  background-color: tomato;
  width: 80px;
  height: 60px;
}

.absolute {
  position: absolute;
  top: 50%;
  right: 10%;
}

<div class="container">
  <div id="menu">
    <p>I'm a menu</p>
  </div>
  <button type='button' id='toggle-absolute'>Toggle Absolute</button>

</div>

class Menu {
  constructor() {
    this.menu = document.querySelector('.menu');
    this.ellipsis = document.querySelector('.fa.fa-ellipsis-v');
    this.callEvent();
  }

  callEvent() {
    this.ellipsis.addEventListener('click',() => {
      $('.menu').toggleClass('show');
    });
  }
}

const menu = new Menu();

#parent-div{
border: 2px solid green;

position: relative;
}

.menu {
  display: none;
}

.show {
  display: flex;
  border: 2px solid;
  
  width: 80px;
  height: 60px;
  position: absolute;
  bottom: -90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div id="parent-div"> 
<table>
<tbody>
<i class="fa fa-ellipsis-v"></i>
<div class="menu">
  <div id="context-menu">
     <a href="#" type="button">Item 1</a>
     <a href="#" type="button">Item 2</a>
     <a href="#" type="button">Item 3</a>
     <a href="#" type="button">Item 4</a>   
  </div>
</div>
<tbody>
</table>
</div>