左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果,后台管理系统中有时候会用到,先上效果图。

未点击的效果,左侧导航标题箭头是向下的

导航栏一级标题上下箭头切换

点击后,对应的二级列表显示出来,箭头变为向上

导航栏一级标题上下箭头切换

二级列表展示隐藏用的是bootstrap, 上下箭头图标用的是Font Awesome,箭头切换用的是jQuery,我是在vue单文件组件中使用。代码如下:

导航栏一级标题上下箭头切换

导航栏一级标题上下箭头切换

invisible样式是bootstrap自带控制不显示的样式。如果切换没起作用,可能是因为你路由切换导致的,如上把控制切换的代码放在组件activated生命周期函数中就可以了。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-01-13
  • 2022-12-23
  • 2021-08-18
  • 2022-12-23
  • 2021-11-29
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-11-29
  • 2022-12-23
  • 2021-12-22
  • 2021-07-24
  • 2021-12-26
  • 2022-12-23
相关资源
相似解决方案