Question

我正在尝试创建一个具有以下形状的简单浮动菜单：大菜单应具有绝对位置，并且每个项目都应具有子菜单。另外，大菜单必须最大为180px，如果内容需要更多空间，则应具有滚动条。我的尝试：

div {
  box-sizing: border-box;
}
div.wrapper {
  position: relative;
}
div.menu {
   max-height: 180px;
   overflow-y: scroll;
   overflow-x: visible;
   width: 250px;
   border: 1px solid blue;
   background: rgba(0,0,0,0.2);
   padding: 5px;
   position: absolute;

}
div.sub-menu {
   position: absolute;
   width: 100px;
   background: red;
   height: 100px;
   z-index: 1;
}
div.sub-toggle {
    position: relative;
}
div.item {
  display: flex;
  justify-content: space-between;
}

class Menu extends React.Component {
    state = {
    show: false,
    showSub: -1
  };

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ show: !this.state.show })
  }

  toggleSub(i) {
    this.setState({ showSub: i })
  }

  renderItem(i) {
        return (
        <div className='item' key={i}>
          <span>item {i}</span>
        <div className='sub-toggle'>
                  <button onClick={() => this.toggleSub(i)}>sub</button>
        {
            this.state.showSub === i &&
          <div className='sub-menu'>
            <div>sub 1</div>
            <div>sub 2</div>
            <div>sub 3</div>
          </div>
        }
        </div>
        </div>
    );
  }

  render() {
    return (
        <div>
        <button onClick={this.toggle}>toggle</button>
        {
            this.state.show &&
           <div className='menu'>
            {new Array(10).fill().map((x, i) => this.renderItem(i))}
          </div>
        }
     </div>
    );
  }
}

ReactDOM.render(
  <div className='wrapper'><Menu /></div>,
  document.getElementById('container')
);

https://jsfiddle.net/9zy7cx3m/4/

问题在于子菜单被溢出中断了。

有没有一种方法可以实现我的目标而不使用DOM操作（纯CSS可能会改变DOM层次结构？）？如果没有，什么是最佳解决方案？（我考虑过制作一个“全局”子菜单，并根据按下的项目更改它的绝对位置。）

为了有价值，我正在使用React。

谢谢！

嵌套的绝对菜单被溢出切断

0 个答案: