首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Boostrap侧边栏父菜单链接不显示子菜单

问题描述:Boostrap侧边栏父菜单链接不显示子菜单

答案:在使用Boostrap侧边栏时,如果父菜单链接不显示子菜单,可能是由于以下几个原因导致的:

  1. 未正确引入Boostrap的相关资源:确保在页面中正确引入了Boostrap的CSS和JS文件。可以通过以下CDN链接引入最新版本的Boostrap资源:
    • CSS:https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css
    • JS:https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js
  • 未添加正确的HTML结构:Boostrap的侧边栏通常使用嵌套的<ul><li>元素来构建菜单,子菜单应该嵌套在父菜单的<li>内部。例如:
代码语言:txt
复制
<ul class="sidebar-menu">
  <li>
    <a href="#parent-link">父菜单</a>
    <ul class="sub-menu">
      <li><a href="#sub-link-1">子菜单 1</a></li>
      <li><a href="#sub-link-2">子菜单 2</a></li>
    </ul>
  </li>
</ul>
  1. 未正确设置CSS样式:Boostrap为侧边栏菜单提供了一些默认的CSS类,你可以根据需要进行自定义或使用预定义的样式类。例如,可以为父菜单添加class="nav-link",为子菜单添加class="nav-sub"
代码语言:txt
复制
<ul class="sidebar-menu">
  <li>
    <a href="#parent-link" class="nav-link">父菜单</a>
    <ul class="sub-menu">
      <li><a href="#sub-link-1" class="nav-sub">子菜单 1</a></li>
      <li><a href="#sub-link-2" class="nav-sub">子菜单 2</a></li>
    </ul>
  </li>
</ul>

以上是一般情况下解决父菜单链接不显示子菜单的方法,具体解决方法还需要根据实际代码和使用的Boostrap版本进行调试和分析。

腾讯云相关产品推荐: 由于题目要求不提及云计算品牌商,这里无法给出腾讯云相关产品的推荐和链接地址。但是腾讯云提供了丰富的云计算产品和解决方案,你可以通过访问腾讯云官方网站获取更多关于腾讯云产品的详细信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于Bootstrap的CSS3响应式滑动侧边布局代码解析附源码下载

bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边布局模板。...该滑动侧边布局在大屏幕中以侧边的形式存在,在小屏幕设备中,菜单会被移动到屏幕的底部,只显示菜单的图标。 ?...使用方法 使用该滑动侧边布局模板需要引入Boostrap相关依赖文件,制作图标需要引入font-awesome.css字体图标文件,以及模板本身需要的bootstrap-vertical-menu.css... CSS样式 侧边菜单的宽度可以通过.navbar-vertical-left来控制,默认是宽160像素(菜单展开后的宽度)。默认侧边菜单的高度和屏幕一样高。...在小屏幕中,菜单显示在屏幕的下方,菜单文字会被隐藏,只显示菜单项图标。

3.4K10

WordPress主题开发必备函数wp_list_categories获取分类列表

WordPress主题开发必备函数wp_list_categories获取分类列表,将分类以列表的形式显示链接。...点击分类的链接,就可以访问该分类下的所有文章的存档页面; wp_list_categories()函数一般用于侧边分类目录归档,这在一般的wordpress博客中我们可以常见到。...也可以通过wp_list_categories()函数来制作网站头部导航菜单,这在大多数的CMS主题中我们就可以常常看到。 '',//排除分类树,即分类及其下的分类'include'=>'',//排除的分类,即显示的分类'hierarchical...'=>true,//是否将分类分级'title_li'=> __('Categories'),//列表标题的名称'show_option_none'=> __('No categories'),/

1.1K10
  • 8.滑动事件处理

    上面是三个viewPager相互嵌套,这么就需要对滑动事件进行处理 首先我们不需要viewpager1滑动,因为每次滑动的时候它的控件就拦截了它的事件,侧边的每次滑的时候就跑了出来,所以这里是这样处理的...,即显示侧边,但是3的话是拦截,让侧边显示出来,这样的话就相互矛盾了,到底是拦截还是拦截了?...} else {// 如果是第一个页面,需要显示侧边, 请求控件拦截 getParent().requestDisallowInterceptTouchEvent(false);// 拦截...,因为侧边把它的滑动事件拦截了。...右划, 而且是第一个页面, 需要控件(mainactivity)拦截,菜单就出来了 2. 左划, 而且是最后一个页面, 需要控件(viewpager2)拦截,会滑动2的下一个页面 * 3.

    1.1K120

    8.滑动事件处理

    上面是三个viewPager相互嵌套,这么就需要对滑动事件进行处理 首先我们不需要viewpager1滑动,因为每次滑动的时候它的控件就拦截了它的事件,侧边的每次滑的时候就跑了出来,所以这里是这样处理的...,即显示侧边,但是3的话是拦截,让侧边显示出来,这样的话就相互矛盾了,到底是拦截还是拦截了?...} else {// 如果是第一个页面,需要显示侧边, 请求控件拦截 getParent().requestDisallowInterceptTouchEvent(false);// 拦截...,因为侧边把它的滑动事件拦截了。...右划, 而且是第一个页面, 需要控件(mainactivity)拦截,菜单就出来了 2. 左划, 而且是最后一个页面, 需要控件(viewpager2)拦截,会滑动2的下一个页面 * 3.

    81120

    WordPress 初学者词汇表(术语解释)

    除了主题之外,还使用主题来显示自定义。当您想对主题(实际代码)进行核心更改时,您需要使用主题来继续更新您的主题。...一个流行的例子是 StudioPress 创建的 Genesis 主题,它在网络上有大量可用的主题。Genesis主题包括所有核心主题功能,而主题包括自定义样式和布局。...在 WordPress 中,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单侧边菜单、页脚菜单等)。...Siderbar(侧边侧边显示帖子或页面上的支持内容。一些网站选择不使用侧边,但如果您这样做,您可以放置小部件(例如关于部分、相关帖子、时事通讯订阅表格或其他任何内容)。...根据您的 WordPress 主题(或页面构建器),侧边通常是左侧或右侧的垂直列,尽管根据帖子类型或页面,某些设计可能具有两个侧边甚至自定义侧边

    7.2K20

    wordpress导航菜单详解及改造

    对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航 也可以做侧边、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说 现在先讲一下菜单的创建 首先要开启导航菜单功能...' )); } add_action('init', 'register_my_menus'); 代码内的菜单名与别名根据实际需要来起 当然照我所写代码也可 具体怎么使用稍后会讲 然后在wp后台菜单显示如下...container_idul节点id值 container_classul节点class值 menu_classul节点class值 menu_idul节点id值 before菜单链接前的文本 after...菜单链接后的文本 link_before每个菜单链接文本前的文本 link_after每个菜单链接文本后的文本 depth菜单深度 containerfalse 时去除div标签 items_wrap值为...可以看到,生成的class名太多了 但图中红线划中的地方 在某些情况下对我们是很有帮助的 例如通过点击导航某个栏目 跳转到这个栏目的页面时 导航此栏目位置高亮 观察导航结构 我们会发现 该栏目会有一个类名

    3.1K70

    webpack+vue项目实战(二,开发管理系统主页面)

    而且首页这个菜单可以点击,执行跳转,其它两个菜单又有菜单,点击只是一个菜单显示与隐藏的操作。 所以,侧边的数据肯定是一个数组,并且是一个对象数组。...每个对象至少有四个属性(要显示的文字,跳转的url,是否有菜单,是否当前菜单)。然后对于有菜单菜单,要给一个属性控制是否展开显示菜单,要一个属性,储存菜单。..., url--跳转的url,tag--当前的标识, hasExtend--是否有二级菜单,fold--是否展开extend--菜单) 2.遍历侧边的数据 <ul class...看到运行结果,侧边出来了。然后,下一步! 3.给侧边写相关的一些操作 关于侧边的操作,比较简单,无非就是点击菜单,跳转路由,标志当前项以及菜单下面子菜单显示与隐藏。...--如果有二级菜单,遍历菜单-->

    1.5K10

    建站日志

    TODO LIST 暂无 2021-08-23 添加打赏榜 2021-07-24 最近Waline评论被恶意攻击了,修改了配置: 评论之前必须先注册登录 评论需要经过审核才可发布 2021-06-05 菜单支持菜单...2018-09-18 添加了图片懒加载插件hexo-lazyload-image 出于强迫症,还是关闭了的统计功能,目的是为了解决下边的问题二。...2018-08-21 最近发现了两个问题: 如果文章写小标题,是不会生成文章目录的,如果启用了leancloud的阅读计数功能,这时候这篇文章的阅读页面的侧边就会失去affix.js的固定定位效果;...(该bug在火狐浏览器下偶尔会触发,在360浏览器下百分百触发) 如果启用了计数,在360浏览器下如果滚动页面时,侧边的底部无法和正文模块的底部持平,侧边底部会比正文模块的短一些。...问题二对于强迫症来说很难受,要么关闭计数,要么不使用360浏览器。

    4.2K30

    【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边菜单生成、标签开发)

    页面比较简单,主要分为左侧的菜单,顶部的导航(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签,之后就是主页面显示区域。...侧边菜单开发 我们之前讲权限的地方已经给大家看过了返回的菜单数据,并封装成了树形结构,所以我们这里菜单就根据保存的菜单数据渲染菜单就可以了。...,并传递给组件进行遍历渲染。...-- 此处嵌套el-icon也可正常显示,嵌套了之后可以使用el-menu预设的样式,且在折叠的时候不会闪动 --> <el-icon ><svg-icon class="...,之后会判断这是个<em>菜单</em>(一级<em>菜单</em>)还是个页面(二级<em>菜单</em>),同时也支持一些只有一个二级<em>菜单</em>的一级<em>菜单</em>直接<em>显示</em>二级<em>菜单</em>,这个是否直接<em>显示</em>根据我们在编辑<em>菜单</em>时配置的alwaysShow决定,后面也会简单的说一下<em>菜单</em>管理的配置项

    4.1K31

    360常用快捷键_10个常用的快捷键

    == =================================== 添加收藏 Ctrl+D 显示/隐藏收藏 Ctrl+B 显示/隐藏侧边 Ctrl+Shift+S 显示收藏夹菜单 Alt+...A 显示工具菜单 Alt+T =================================== == 杂七杂八 == ==================...Alt+C 打开侧边的收藏夹 Alt+E 展开编辑菜单 Alt+F 展开文件菜单 Alt+H 展开帮助菜单 Alt+M 展开菜单更多按钮,用于调整一些类似激活新窗口,使用ie访问等。...Ctrl+点击页面链接 在新窗口访问链接 Shift+点击页面链接 放大页面 Ctrl+向上滚动鼠标滚轮 缩小页面 Ctrl+向下滚动鼠标滚轮 恢复页面到100% Ctrl+Alt+滚动鼠标滚轮 保存页面元素...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    90620

    Hexo-NexT搭建个人博客(三)

    一、菜单中标签与侧边中标签关联的问题   以我的博客为例,关于菜单中的选项 与侧边中的选项,由于顶部菜单中位置有限,所以我就想在顶部菜单中不显示标签这一项,于是我在 主题配置文件 中 将 menu...配置项中的标签这一个选项给注释掉了,所以它不会在菜单显示,但是代表没有这个页面,这个页面是存在的,我们只是使其不显示在顶部的菜单中而已,我们可以直接输入绝对地址来查看这个页面,例如:https...但是与此同时,我们发现侧边中的标签选项只能显示标签数量,不能点击。   这是因为侧边中的点击链接是根据菜单中对应的项来添加的,什么意思呢?...就是说如果顶部菜单中有 标签 这一项,那么就会给侧边中标签这一项也添加点击链接;如果顶部菜单中没有标签这一项,那么就不给侧边中标签这一项添加点击链接,导致侧边中的标签项只有显示数据,不提供点击链接...如果我们不想在菜单显示标签项,但是希望侧边中的标签项 可以点击,该怎么做呢?

    34510

    总结一下最近学习的后台管理系统的前端权限设计

    本文以思路为主,不会写出全部代码 基础工作 首先还是后台管理系统的基础工作,登录,侧边,导航什么的,因为给的时间实在太紧,我就直接用的网上已经有的基础框架 vue-admin-template...菜单表设计 因为 vue-admin-template 框架中,侧边是根据路由生成的,所以我们只要用一个菜单表维护路由就行了,不需要单独再搞一个侧边管理,为了满足渲染路由所必须的参数,我们需要告诉后端我们都需要什么参数...字段 含义 备注 title 标题 用于侧边标题展示 icon 图标 用于侧边图标展示 type 类型 区分目录/菜单/按钮 parentId 级id 记录父子关系 name...:list hidden 是否渲染在侧边 有一些路由我们需要可以访问,又不想让它出现在侧边 *以上仅列出我们所必须的字段,像创建时间,创建人,排序等可以与后端协商按需求添加 角色分配 菜单表搞好之后...,我们只需要判断该节点是否是节点就可以了 let menuId = res.data.menuId // 后端返回的id字符串 '1,3,4,5,8,9' let _arr = menuId.split

    71150

    Android入门教程 | DrawerLayout 侧滑

    DawerLayout 分为侧边菜单和主内容区两部分: 主内容区要放在侧边菜单前面,还有就是主内容区最好以 DrawerLayout 最好为界面的根布局,否则可能会出现触摸事件被屏蔽的问题。...侧滑菜单部分的布局必须设置 layout_gravity 属性,表示侧滑菜单是在左边还是右边,设置了 layout_gravity="start/left" 的视图才会被认为是侧滑菜单。...使用的注意事项 主内容视图一定要是 DrawerLayout 的第一个视图 主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图的 android:layout_gravity 属性...android:layout_gravity = "start" 时,从左向右滑出菜单 android:layout_gravity = "end"时,从右向左滑出菜单 推荐使用left和right...现在侧边放的是RelativeLayout。 也可以放一个RecyclerView。 抽屉出来时推动页面 监听侧滑的滑动事件,使用ActionBarDrawerToggle。

    2.2K10

    handsome主题下载:一款十分华丽且功能强大的Typecho主题

    基于boostrap3框架内置丰富css和js组件:可自定义性极强。内置5套独立页面的自定义模板:豆瓣书单、时光机、文章归档、留言板、友情链接。...) 增加头图样式交错模式(即大头图和小头图根据奇偶以次显示)(后台外观设置——外观设置——头图样式选择) 增加侧边分类中有分类情况下分类是否显示(外观设置——主题增强功能) 优化 摘要中排除login...加密文字 回复可见必须是评论审核后 优化了最后一点风格,深红色变成了淡红色 优化了黑色风格,更加的深邃迷人 优化了引用块的样式 优化了侧边的样式 优化了手机端的顶样式 升级meting至1.5.4优化了...handsome的debug模式 之前播放器自动播放的提示不小心删掉了,现在补上 调整了首页文章标题的字体大小 优化了lazyLoad的加载bug修复 时光机的联系方式以新窗口打开链接 购买地址 作者博客...---- 版权属于:Cyril 本文链接:https://www.cyrilstudio.top/archives/5/ 转载时须注明出处及本声明

    4.2K60

    前端成神之路-vue前端项目02

    通过更改el-menu的active-text-color属性可以设置侧边菜单中点击的激活项的文字颜色 通过更改菜单项模板(template)中的i标签的类名,可以将左侧菜单的图标进行设置,我们需要在项目中使用第三方字体图标...,显示其中的菜单,我们可以在el-menu中添加一个属性unique-opened 或者也可以数据绑定进行设置(此时true认为是一个bool值,而不是字符串) :unique-opened=“true...” 6.制作侧边菜单的伸缩功能 在菜单上方添加一个div ...,在main的主体结构中添加一个路由占位符 制作好了Welcome级路由之后,我们需要将所有的侧边二级菜单都改造成级路由链接 我们只需要将el-menu的router属性设置为true就可以了,

    4K10

    Halo博客的部署和使用

    4 Halo 博客设置 效果预览(使用Dream for Halo 2.x主题,预览图仅供参考): 4.1 基础设置 侧边“设置”中包含: 基本设置:站点标题、副标题、logo 等 文章设置:各页文章显示条数...【可选】StackEdit:另一款 Markdown 编辑器 4.3 菜单 创建菜单侧边菜单”,选择在主菜单中新建): 名称 链接地址 备注 首页 / 无 归档 /archives 同主题路由设置中归档页路由前缀相同...、捐赠二维码等 侧边配置:侧边展示(详情见下方表)、各模块类型的具体设置 页面设置:设置友链页面、标签页面等 增强功能:鼠标设置、特效显示、访客统计、自动推送等 定制主题:主题样式自定义设置 侧边模板类型...“文章”页内可管理文章分类和标签 添加文章页可切换编辑器,文章设置中可针对调整此篇文章的某些设置 使用“对象存储”插件,可在侧边“附件”内改变存储策略 侧边“图库”为菜单“相册”,侧边链接”为菜单...“友链”,侧边“瞬间”为菜单“动态” 侧边“用户”内角色管理可新建角色权限组,使用“OAuth2 认证”插件可在身份认证中设置多登录方式 侧边“概览”中外部访问地址必须为外网 IP 或者域名,当为

    47110

    react实践笔记:父子组件数值双向传递

    比如侧边菜单的实现:顶部导航通过点击“筛选”按钮展开侧边,而侧边自身通过点击“箭头”按钮收起侧边。...一、单向传递     要实现侧边的功能,需要先了解父子组件各自单向传递的方式。 1、组件传值给组件     组件传值给组件,主要是通过 props 的方式进行处理。...主要实现以下两个流程: 1、实现“筛选”按钮展开侧边的功能,具体路径是: 点击“筛选”按钮 》改变组件记录的侧边展开状态,并触发组件自身状态值的改变 》组件重新渲染 》通过 props 传值给侧边...:{show.toString()} ); } } 2、接下来就是实现侧边的收起功能,具体的路径如下: 点击“箭头”按钮 》 将侧边的展开状态变成收起状态...这是因为,对于组件状态的变化,组件只需要记录下就可以了,并不需要再次做重新的渲染。而且如果直接改变组件的状态,则会引发组件的重新渲染,从而触发侧边的属性传递。

    4.2K00
    领券