具有引导程序/ Jquery的多级(最多3级)垂直菜单

我正在尝试创建一个垂直且最多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问题,无法创建类似的导航菜单.

解决方法

这可能不是您正在寻找的答案,但这是我在您的情况下会做的.

我有时使用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

我希望这对你有用.随意提出任何问题,或者如果你想要修改的东西(当然,你不能尝试),我会尽力帮助你.

具有引导程序/ Jquery的多级(最多3级)垂直菜单

解决方法

猜你在找的jQuery相关文章