boostrap实现动态三级菜单-ul模拟select

最新推荐文章于 2022-08-07 09:48:48 发布

一直要学习

最新推荐文章于 2022-08-07 09:48:48 发布

阅读量804

点赞数

分类专栏：前端文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/weixin_41768866/article/details/115763675

版权

这篇博客讲述了如何利用Bootstrap的导航栏样式和JavaScript实现一个动态三级菜单，该菜单模拟了select的效果，并且具有选中菜单项后，下级菜单不再显示的特性。作者通过自定义CSS样式和JSON数据配合JavaScript实现了这一功能，并提供了参考链接。

摘要由CSDN通过智能技术生成

1.前言
又到了前端。。。
你永远想不到有些需求是多么地奇葩，但存在即合理
在这里插入图片描述

这次是要求完成一个三级菜单，这个菜单的样式是导航栏样式，效果是select效果，即有选中效果
额外的功能是：一级菜单出现的选项，二级，三级不能再出现，二级出现的选项，三级不能再出现
在这里插入图片描述
或者

2.开始
毫无疑问的是，bootstrap中用ul去模拟select效果还是能实现的，但是网上没有太多教程
但是基础是bootstrap导航栏

<div class="row" >
                            <div style="margin-left: 20px" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
                                一级指标
                                <div class="dropdown" style="display: inline">
                                    <input type="button"  class="btn dropdown-toggle" id="dropdownMenu1"
                                            data-toggle="dropdown"  value="点击添加" />
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                        <li class="dropdown-submenu"><span class="detailed">行业类型</span>
                                            <ul class="dropdown-menu">
                                                <li class="choose_search" value="1"><span class="detailed">行业类型全选</span></li>
            
                                            </ul>
                                        </li>
                                        <li class="dropdown-submenu"><span class="detailed">企业规模</span>
                                            <ul class="dropdown-menu">
                                                <li class="choose_search" value="2"><span class="detailed">企业规模全选</span></li>
                                                <li class="choose_search" value