您的位置：首页 > Web前端 > BootStrap

垂直伸缩菜单——bootstrap手风琴嵌套

2015-09-19 09:53 441 查看 
[code]bootstrap的折叠插件collapse具有可伸缩的效果，将其进行嵌套使用就可以摇身一变成为一个垂直伸缩的菜单了。
关于collapse的基本用法可以参考  http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html ，


里面会有较详细的用法。

[code]<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"> 
            <!-- Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件，在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        商品分类
    </div>
    <div class="panel-body">
        <button class="btn btn-link" role="button" type="button" data-toggle="collapse" data-target="#menu1">
            一级菜单

        </button>
        <div id="menu1" class="collapse">
            <button class="btn btn-link" role="button" type="button" data-toggle="collapse" data-target="#menu11">
                二级菜单
            </button>
            <div id="menu11" class="collapse">
                <button class="btn btn-link">
                    三级菜单
                </button>
            </div>
        </div>
    </div>
</div>
</body>


[code]接下来，我们为它添加点图标，这里用到了bootstrap的.has-feedback通过这个类我们可以为button加上图标。


[code]
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        商品分类
                                    </div>
                                    <div class="panel-body">
                                        <div class="has-feedback">
                                        <button class="btn btn-link btn-lg" role="button" type="button" data-toggle="collapse" data-target="#menu1" onclick="changeFeedback('feedback-menu1')">
                                        <span class="glyphicon glyphicon-menu-right" id="feedback-menu1" ></span>
                                            一级菜单

                                        </button>                                           
                                        </div>

                                        <div id="menu1" class="collapse">
                                            <div class="has-feedback">
                                            <button class="btn btn-link" role="button" type="button" data-toggle="collapse" data-target="#menu11" onclick="changeFeedback('feedback-menu11')">
                                            <span class="glyphicon glyphicon-menu-right" id="feedback-menu11"  ></span>
                                                二级菜单
                                            </button>
                                            </div>

                                            <div id="menu11" class="collapse">
                                                <div class="has-feedback">
                                                <button class="btn btn-link btn-sm" onclick="changeFeedback('feedback-menu111')">
                                                <span class="glyphicon glyphicon-menu-right" id="feedback-menu111" ></span>
                                                    三级菜单
                                                </button>                                           
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>


最后我们加上点击时的动态效果——即触发onclick事件时将图标的样式进行切换，达到视觉上的动态效果。

[code]
<script type="text/javascript">
    function changeFeedback(id)
    {
        var str = document.getElementById(id).className;
        var tag = str.substring(25,str.length);
        if(tag == "right")
        {
            document.getElementById(id).className = "glyphicon glyphicon-menu-down";
        }else
        {
            document.getElementById(id).className = "glyphicon glyphicon-menu-right";
        }
    }
    </script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航