html怎么创建父菜单,javascript,html_在侧边栏中点击除了第一行之外的父菜单，却只展起第一行子菜单，而且没有展起对应的子菜单。，javascript,html - phpStudy...

最新推荐文章于 2021-11-27 17:17:51 发布
最新推荐文章于 2021-11-27 17:17:51 发布
阅读量88 收藏
点赞数
文章标签： html怎么创建父菜单

在侧边栏中点击除了第一行之外的父菜单，却只展起第一行子菜单，而且没有展起对应的子菜单。

在侧边栏中点击除了第一位之外的父菜单，却只展起第一列子菜单，而且没有展起对应的子菜单，我写的JS是不是缺了循环语法？

请各位大神老师指点

function submenu(){

var dorpmenu = document.getElementById("submenu-dorpmenu");

if(dorpmenu.style.display == "none")

{

dorpmenu.style.display = "";

}else{

dorpmenu.style.display = "none";

}

}

相关阅读:

apache 虚拟主机 403 很简单的问题，想不通哪里出错了

请问以下Flask数据库配置哪里出错了呢？我是根据教程一步一步来做的：

Atom手动插件都不行，如何解决

vc++ MFC 控件库(就是重绘标准控件) 可以做成 lib 静态链接库吗？

$.post方法

关于java方法里的非空判断的疑问，谢谢

flask return 的问题

为什么这样的代码会出现RUNTIME ERROR?

工程定位后崩溃到main.m中,如何确定崩溃原因?求指教!~

初学web前端 做响应式网站 推荐用框架吗

php 微信支付处理

html页面上展示的不知道是什么元素

如何获取图片的颜色值？

java中*/*怎么使用？地址栏如何访问

软件自动升级框架设计

win10出现"REFERENCE_BY_POINTER"这种问题怎么解决？

ubuntu下apt-get方式安装的PHP安装文件在哪？

爬虫在运行一段时间后开始不断获得504的StatusCode，是否是对方站点的反爬虫策略导致？有何回避策略？

html页面打开pdf

Java的StringPool是存放在方法区中,是所有类共享的吗?

野生凯弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧
柒柒兮的博客
08-02 3109
第一步在路由中设置 { path: "/aView", name: "aView", meta: { title: '父菜单' }, component: () => import( "../views/aView.vue"), }, { path: "/bView", name: "bView", meta: { title: '子菜单', activeMenu:'aView'//注意这里的设置,设置的是父菜单的pathName }, component: () =&
三级菜单实现（建议使用父子结构）
Just do it！
06-04 955
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu</title> <style> ul, li { margin: 0; padding: 0; } li { list-styl...
Mysql 查询父菜单下所有的子菜单，Mysql迭代查询
蕃薯耀的博客
11-27 3800
Mysql迭代查询子菜单
菜单表找出父菜单下所有子菜单_Excel数据透视表总计百分比（父行或列），差异，运行总计...
weixin_39622710的博客
12-04 882
数据透视表中的显示值主要用于对excel中的百分比进行小计。包括合计百分比、行和列合计百分比、父行合计百分比、父列合计百分比、父合计百分比、差异百分比、运行合计百分比、运行合计百分比，其中摘要为父行合计百分比，父列总计和父列总计。父行合计的百分比通常用于小计产品在所有区域中不同区域的销售百分比；父列合计的百分比通常用于小计每月销售占总销售的百分比，它需要首先将每个月的数据合并到数据透视表中合并范围...
html父子页面关系,html元素的父子关系的使用
weixin_35790607的博客
06-04 1255
hello world最近在看别人的代码的时候,又让我发现了html元素中的一些新用法.在此共享一下.首先:元素的父子关系.通过这个例子我马上就想到了制作可折叠的下拉菜单的方法.原来我是通过给子结点设置id属性,然后根据用户的点击行为来控制它的显隐,缺点是每个子菜单都得设置一个id比较麻烦,但是通过上面这个小例子,做折叠菜单就可以不借助id属性了,.点击父结点后,获取他的子结点,然后根据它的di...
html元素的父子关系的使用
guoguo19811025的专栏
08-15 7501
    function show(obj){   var p = obj.parentElement;   p.cancelBubble = false;    //去掉冒泡没有成功,遗憾   alert(p.type);  }  function show1(obj)  {   var p = obj.children[0];   alert(p.type);  } //-->    he
CSS3侧边栏卡片式菜单导航.rar_CSS3侧边栏卡片式菜单导航_quiet7s1_wrappedvss
09-23
在这种侧边栏菜单中，无论菜单项的文本多长，都能保持整体布局的整洁和一致性。 实现这样的CSS3侧边栏卡片式菜单导航，需要掌握以下关键技术： 1. CSS3选择器：用于精准地选中和应用样式到特定的HTML元素。 2. ...
html5手机端弹出侧边栏滑动菜单特效代码
03-20
在这个案例中，jQuery用于监听用户的点击事件，控制侧边栏的显示与隐藏，并添加平滑的过渡动画。 在实现这个特效时，HTML5的`<nav>`标签可以用来定义导航链接，`<a>`标签表示链接，而CSS3的`transform`和`...
JavaScript可展开隐藏的侧边栏下拉菜单
08-23
这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三方插件，因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示...
js左右两侧滑动展开菜单代码
06-24
在移动设备上，为了优化用户体验，常常会使用到滑动展开的侧边栏菜单。这种设计可以节省屏幕空间，提供良好的导航功能。本篇将详细讲解"js左右两侧滑动展开菜单代码"的相关知识点，以及如何实现这样的效果。 首先，...
oracle查询父菜单及父菜单下的子菜单
liufeihuwudi的博客
06-29 451
select t1.* from work_area t1 where exists ( select 1 from work_area t where t.owner = ‘HXX’ and ( t.parent_work_area_rrn = t1.sys_rrn or ( t.parent_work_area_rrn = t1.parent_work_area_rrn or t.sys_rrn = t1.sys_rrn ) ) )
react + antd实现只展开一个父级菜单栏的侧边栏（三级菜单栏）
qq_44688392的博客
09-15 3801
工作中遇到一个需求，三级侧边栏只能展开一个父级菜单栏，保持页面简洁，提高用户体验，也是在网上查了很久，也没有完全符合要求的，就结合他人的自己写了一个。。。。 展开三级父级菜单的方法 onOpenChange = (openKeys) => { const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1); let openList; if(th
Jquery实现父菜单 与 子菜单的动态伸张效果(源码)
sungang1120的专栏
12-20 224
[size=x-large][align=center][color=red]Jquery实现父菜单 与 子菜单的动态伸张效果[/color][/align][/size] 一、[size=medium][color=red]jsp代码：[/color][/size] My JSP 'test_Jquery01 .jsp' starting page ...
单表具有父级Id的菜单整合递归实现
小码龙的博客
01-08 1678
首先有一张菜单的表，具有如下的两个字段 id，pid 一般最上层菜单的父级id为0， 如下结构 id pid a 0 b 0 a1 a a2 a b1 b b2 b a11 a1 b11 b1 等等 这种的无限向下延伸 java中有两个类 sysMenu是数据库表的model类 Menu是自己封装的 具有list&lt;Menu&gt;这个属...
在父菜单和子菜单在同一张表的级联怎么做啊
qq_30641479的博客
01-22 1476
我写的controller级联的方法，在同一张数据库表的父菜单和子菜单 @RequestMapping(value="add",method=RequestMethod.POST) @ResponseBody public Object add(@RequestParam(value="resourceId",required=true)String resourceId,//菜单id @
侧边栏-nav-4级菜单的点击跳转
csstmg的博客
03-30 287
getBreadcrumb () { console.log(this.$route.matched) debugger this.levelList = this.$route.matched.filter(item => item.meta && item.meta.title) // console.log(this.$route.path); }, // 点击面包屑跳到对应的页面 handleLink ...
后端返回给前端两个数组，第一个数组是标签页内容，第二个数组是侧边栏内容及侧边栏对应的页面内容，前端根据这两个数组，基于vue+elementui实现点击顶部标签栏，定位到对应侧边栏，点击侧边栏的某一项，显示对应的页面内容
最新发布
05-19
好的，你可以这样实现： 1. 在Vue中，通过v-for指令循环渲染标签页和侧边栏内容，比如： ```html <!-- 标签页 --> <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs" :label="tab.label" :name="index" :key="index"></el-tab-pane> </el-tabs> <!-- 侧边栏 --> <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect"> <el-submenu v-for="(menu, index) in menus" :index="index" :key="index"> <template slot="title">{{menu.title}}</template> <el-menu-item v-for="(subMenu, subIndex) in menu.subMenus" :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`">{{subMenu.title}}</el-menu-item> </el-submenu> </el-menu> ``` 2. 在Vue组件中，定义标签页和侧边栏的数据和方法，比如： ```javascript export default { data() { return { tabs: [ { label: '标签页1' }, { label: '标签页2' }, { label: '标签页3' } ], activeTab: '0', // 默认选中第一个标签页 menus: [ { title: '侧边栏1', subMenus: [ { title: '侧边栏1-1', content: '侧边栏1-1的内容' }, { title: '侧边栏1-2', content: '侧边栏1-2的内容' } ] }, { title: '侧边栏2', subMenus: [ { title: '侧边栏2-1', content: '侧边栏2-1的内容' }, { title: '侧边栏2-2', content: '侧边栏2-2的内容' } ] }, { title: '侧边栏3', subMenus: [ { title: '侧边栏3-1', content: '侧边栏3-1的内容' }, { title: '侧边栏3-2', content: '侧边栏3-2的内容' } ] } ], activeMenu: '0-0' // 默认选中第一个侧边栏 } }, methods: { handleMenuSelect(index) { // 处理侧边栏选中事件，获取选中菜单对应的内容 const [menuIndex, subMenuIndex] = index.split('-') const content = this.menus[menuIndex].subMenus[subMenuIndex].content // 根据选中的侧边栏内容，新建一个标签页 this.tabs.push({ label: index, content }) this.activeTab = `${this.tabs.length - 1}` } } } ``` 3. 在Vue组件中，通过监听标签页的切换事件，动态改变侧边栏和页面内容，比如： ```javascript export default { watch: { activeTab(newIndex, oldIndex) { // 标签页切换时，更新侧边栏和页面内容 const { content } = this.tabs[newIndex] if (content) { const [menuIndex, subMenuIndex] = this.activeMenu.split('-') const newContent = this.menus[menuIndex].subMenus[subMenuIndex].content if (newContent !== content) { this.tabs[newIndex].content = newContent } } } } } ``` 这样就可以实现点击顶部标签栏，定位到对应侧边栏，点击侧边栏的某一项，显示对应的页面内容了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值