logo标签列表

使用Bootstrap/JQuery实现多级（最多3级）垂直菜单

jquerycsstwitter-bootstrapjquery-ui
12
我正在尝试创建一个垂直的导航菜单，可达到3级导航，最后一级是可切换的菜单（当您单击最后一级菜单时，会出现一组子菜单）。 菜单结构的示例结构类似于此图像。 我尝试了下面的代码，但没有得到期望的输出。
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap </title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link href="StyleSheet1.css" rel="stylesheet" />
    <!-- Optional theme
    <link rel="stylesheet" href="">
         -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .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;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-md-3 column margintop20">
            <ul class="nav nav-pills nav-stacked">

                <li class="dropdown-submenu active">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="dropdown-menu">

                        <li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li>
                        <li class="dropdown-submenu"><a href="#">Research</a></li>
                        <li class="dropdown-submenu active">
                            <a href="#">APL & Products</a>
                            <ul class="dropdown-menu parent">
                                <li style=" border-bottom: 1px solid #ccc;">
                                    <a href="#">
                                        Approved Product List
                                        <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                        <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                    </a>

                                    <ul class="child">
                                        <li style="padding:10px 15px;">Platforms</li>
                                        <li style="padding: 10px 15px;">Managed Funds</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                    </ul>

                                </li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"><a href="#">Implementation</a></li>
                        <li class="dropdown-submenu"><a href="#">Review</a></li>
                        <li class="dropdown-submenu"><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li class="dropdown-submenu"><a href="#">Personal Development</a></li>
                <li class="dropdown-submenu"><a href="#">Practice</a></li>
                <li class="dropdown-submenu"><a href="#">News</a></li>
            </ul>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
    </script>
</body>
</html>

有没有办法使用Bootstrap和jQuery创建垂直多级菜单结构？我还没有用垂直方向的多级菜单。在这段代码中遇到了CSS问题，无法创建类似的导航菜单。
我知道这不像您的模型，但这可能有所帮助：http://thecodeplayer.com/experiment/vertical-accordion-menu-using-jquery-css3/3 - Leonel Atencio
2个回答
8
这可能不是你要找的答案，但这是在你的情况下我会做的事情。
我有时使用Bootstrap，但尽管它很好用，在我个人看来，人们经常认为它是一种可以让你做任何想做的奇妙代码。最近，我发现人们花费更多时间来修改Bootstrap CSS，而不是从头开始制作整个CSS（如果你知道一些基本的CSS），更不用说那么多网站“看起来”如此相似了。
针对您想要做的事情，我基本上会清除html中的所有类，并从容器中挑选元素，就像您在图像中展示的菜单一样（好吧，它需要一些额外的样式，比如添加箭头图标、阴影等，但重点是向您展示另一种方法）。
HTML:
<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class=""><a href="#">Strategy & Technical</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#">APL & Products</a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                        <li class=""><a href="#">Review</a></li>
                        <li class=""><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
                <li ><a href="#">News</a></li>
            </ul>

    </div>

而这个 CSS（请注意，当我直接调用 <a> 标签时，您可能需要以不同的方式调用它：）
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;
}

我只保留了激活脚本的类，所以它没有被修改。 希望这对您有用。 如有任何问题或需要修改某些内容（尝试后无法修改），请随时提问，我会尽力帮助您。 链接：FIDDLE
1
绝对同意Bootstrap不是许多人认为的万能解决方案。"我可以使用Bootstrap，所以我不需要学习CSS!" - krillgar
如果您查看附加的锁定屏幕，最后3个菜单固定在底部，如何处理？ - F11
1
我不明白你所说的“固定在底部”是什么意思。你能解释一下吗？另外，你已经更改了原始图像（我的示例看起来像）。最好在问题中添加另一张图片，而不是没有“编辑”注释就进行更改。现在和将来的用户看到我的答案会觉得不够详细。 - Alvaro Menéndez
6
你可以按照你的截图制作它：http://codepen.io/MaGiO/pen/YXXzeJ HTML
<div id="mn-wrapper">
        <div class="mn-sidebar">
            <div class="mn-toggle"><i class="fa fa-bars"></i></div>
            <div class="mn-navblock">
                <ul class="mn-vnavigation">
                    <li class="dropdown-submenu active">
                        <a tabindex="-1" href="#">Client Advice</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Pre-advice</a></li>
                            <li><a href="#">Strategy & Technical</a></li>
                            <li><a href="#">Research</a></li>
                            <li class="dropdown-submenu active">
                                <a href="#">APL & Products</a>
                                <ul class="dropdown-menu parent">
                                    <li style=" border-bottom: 1px solid #ccc;">
                                        <a href="#">
                                            Approved Product List
                                            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                                            <span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
                                        </a>

                                        <ul class="child">
                                            <li style="padding:10px 15px;">Platforms</li>
                                            <li style="padding: 10px 15px;">Managed Funds</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Wealth Protection</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                            <li style="padding: 10px 15px;">Listed Securities</li>
                                        </ul>

                                    </li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                    <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Implementation</a></li>
                            <li><a href="#">Review</a></li>
                            <li><a href="#">Execution Only</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Personal Development</a></li>
                    <li><a href="#">Practice</a></li>
                    <li><a href="#">News</a></li>
                </ul>
            </div>
            <div class="text-right collapse-button" style="padding:7px 9px;">

            </div>
        </div>
        <div class="container" id="mn-cont">
            <div class="cnt-mcont">
                <h1>Title Page</h1>
            </div>
        </div>
    </div>

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();
    });

你想要像这样的东西吗？
如果您查看附加的锁定状态，最后3个菜单会固定在底部，请问如何处理？ - F11
1
我已经更新了代码，请在这里查看：更新代码。 - MaGiO
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接