基于移动设备上点击位置的下拉列表弹出 CSS

Posted 2023-02-22

【中文标题】基于移动设备上点击位置的下拉列表弹出 CSS

【英文标题】：CSS for Drop down list popup based on the position that click on the mobile device

【发布时间】：2021-10-23 06:50:44

【问题描述】：

我是 React.js 的新手。我们使用 material-io CSS 框架来构建我们的应用程序。

我的任务是在下拉菜单中显示菜单项，该菜单项在移动设备上打开时根据菜单的位置打开到顶部或底部..

它类似于 Facebook 视频部分，当用户单击 (...) 图标时，它会根据图标的屏幕位置显示选项。

Facebook bottom appear]2

Facebook 菜单底部出现

【参考方案1】：

您可以使用 react-power-tooltip。使用：

从 Npm 安装 $ npm install react-power-tooltip --save

导入到项目 import Tooltip from 'react-power-tooltip'

向封闭的目标组件添加悬停状态和鼠标事件处理程序

class Test extends Component 
  state = 
    show: false
  

  showTooltip = bool => 
    this.setState( show: bool )
  

  render() 
    return (
      /* Target element position needs to be RELATIVE */
      <div 
        style= position: 'relative' 
        onMouseOver=() => this.showTooltip(true) 
        onMouseLeave=() => this.showTooltip(false)>

          /* ADD TOOLTIP HERE */

        </div>
    );
  

export default Test;

在目标元素内添加工具提示

/* Add options/text via span elements */
<Tooltip show=this.state.show>
  <span>Some text</span>
</Tooltip>

更多信息： https://justinrhodes1.github.io/react-power-tooltip/

【参考方案2】：

您可以使用提供工具提示菜单的库。例如https://justinrhodes1.github.io/react-power-tooltip/