当我的reactjs页面点击移动的大小屏幕汉堡包图标显示,但我不知道如何添加/打开面板时,用户点击汉堡包图标。
<div className={styles["navbar-responsive-menu"]}>
<Button theme="transparent">
<HamburgerMenu size="32" color="var(--white-100)"/>
</Button>
</div>
当我的reactjs页面点击移动的大小屏幕汉堡包图标显示,但我不知道如何添加/打开面板时,用户点击汉堡包图标。
<div className={styles["navbar-responsive-menu"]}>
<Button theme="transparent">
<HamburgerMenu size="32" color="var(--white-100)"/>
</Button>
</div>
2条答案
按热度按时间mm9b1k5b1#
您需要某种类型的逻辑来确定单击时何时打开和关闭。
useState()
将是我的首选。现在,您需要使用一些三元运算符(
:
、?
)来更改将呈现实际菜单的指定组件的className。但是,当实际菜单打开时,您可能还希望出现一个“X”类型的按钮来代替汉堡菜单按钮,并且,当菜单显示时,您可能还希望隐藏汉堡菜单按钮。
你需要在
<HamburgerMenu />
中添加一个动态的className来隐藏nav === true
,然后添加一个默认隐藏的<CloseMenu />
,但是在nav === true
时会显示出来,这些都可以使用相同的逻辑来完成。希望上面的片段能有所帮助。
a0x5cqrl2#
您应该创建一个状态变量,例如:const [面板打开,设置面板打开] =使用状态(假);
然后,当您单击汉堡包时,添加一个onclick事件来切换状态,例如onClick={togglePanel}
然后在togglePanel函数中,按如下方式切换状态:设置面板打开(!panel打开)
然后,当panelOpen变量为true时,使用条件呈现来呈现面板,例如{panelOpen &&(... Panel code)}
干杯伙计。