具有引导程序/ Jquery的多级（最多3级）垂直菜单
我正在尝试创建一个垂直且最多3级导航的导航菜单，最后一级是可切换的菜单（当你点击最后一级菜单时，下面会出现一组子菜单）。菜单结构的示例结构是与此类似
我试过下面的代码，但没有获得所需的输出
Bootstrap <!-- Optional theme --> .dropdown-submenu { position: relative; border-bottom: 1px solid #ccc; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } ul { list-style: none; } $('.child').hide(); //Hide children by default $('.parent').children().click(function () { event.preventDefault(); $(this).children('.child').slideToggle('slow'); $(this).find('span').toggle(); }); 有没有办法使用bootstrap创建一个垂直的多级菜单结构，jquery我还没有任何垂直方向的多级菜单。使用此代码的css问题，无法创建类似的导航菜单。
这可能不是您正在寻找的答案，但这是我在您的情况下会做的。
我有时使用bootstrap但是，尽管它很好，但在我看来，人们常常认为这是一个奇迹般的代码可以让你做任何你想做的事情，最近我发现人们花了更多的时间来修改bootstrap css而不是从头开始制作整个CSS（如果你知道一些基本的CSS），更不要说这么多的网络“看起来”如此相似。
对于你想要做什么我基本上清除html中的所有类，只是从容器中狙击元素我可以在图像中显示一个菜单（好吧，它需要一些额外的风格，如添加箭头图标，阴影和这样，但重点是向您展示另一种方法）。
HTML：
- Client Advice
- Pre-advice
- Strategy & Technical
- Research
- APL & Products
- Approved Product List
- Platforms
- Managed Funds
- Wealth Protection
- Listed Securities
- Wealth Protection
- Listed Securities
- Listed Securities
- Model Portfolios
- Non-approved Products
- Implementation
- Review
- Execution Only
- Personal Development
- Practice
- News
只是这个css（请注意，当我直接调用标签时，您可能需要以不同的方式调用它：
html, body { margin:0; padding:0; height:100%; } * {box-sizing: border-box;} .container { height:100%; } a { color:#fff; text-decoration:none; border-bottom:1px dotted #fff; padding:0px 0px 20px 0px; width:100%; display:block; height:100%; } li { padding:20px 20px 0 20px; width:100%; color:#fff; } .container ul {height:100%;} .container > ul { width:250px; background-color:#224490; position:relative; overflow:visible; } .container > ul > li {} .container > ul > li:hover {background-color:#0f1e41;} .container > ul > li > ul { display:none; position:absolute; right:-250px; top:0; width:250px; background-color:#18316a; } .container > ul > li:hover > ul { display:block; } .container > ul > li > ul >li:hover {background-color:#0f1e41;} .container > ul > li > ul > li > ul { display:none; position:absolute; right:-250px; top:0; width:250px; background-color:#112551; } .container > ul > li > ul > li:hover ul { display:block; } .container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;} .container > ul > li > ul > li ul li ul li { border-bottom:1px dotted #fff; padding:20px; }
我刚刚保留了激活脚本的类，所以保持不变。
小提琴
我希望这对你有用。 随意提出任何问题，或者如果你想要修改的东西（当然，你不能尝试），我会尽力帮助你。
你可以像截图一样： http ： //codepen.io/MaGiO/pen/YXXzeJ
HTML
Title Page
CSS
html{ height:100%; /* make sure it is at least as tall as the viewport */ } body{ height:100%; /* force the BODY element to match the height of the HTML element */ position: relative; } .dropdown-submenu { border-bottom: 1px solid #ccc; } #mn-wrapper { display: table; width: 100%; position: absolute; height: 100%; } .mn-sidebar { display: table-cell; position: relative; vertical-align: top; padding-bottom: 49px; background: #272930; width: 216px; z-index: 2; } #mn-cont { display: table-cell; vertical-align: top; position: relative; padding: 0; } .container { margin-right: auto; } .cnt-mcont { background-color: #F6F6F6; color: inherit; font-size: 13px; font-weight: 200; line-height: 21px; padding: 15px 30px 30px 30px; margin-top: 0; height: 101vh; } .mn-sidebar .mn-toggle { display: none; padding: 10px 0; text-align: center; cursor: pointer; } .mn-vnavigation { margin: 0 0 0 0; padding: 0; border-top: 1px solid #1a1c20; border-bottom: 1px solid #2f323a; } .mn-vnavigation li a { border-top: 1px solid #32353e; border-bottom: 1px solid #1a1c20; display: block; padding: 14px 18px 13px 15px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 300; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); white-space: nowrap; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; height: 101vh; width: 216px; background: #272930; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } ul { list-style: none; }
JS
$('.child').hide(); //Hide children by default $('.parent').children().click(function () { event.preventDefault(); $(this).children('.child').slideToggle('slow'); $(this).find('span').toggle(); });
你想要这样的东西吗？