bootstrap实现网页手风琴--博客园老牛大讲堂

网页常用有网页的左右导航，其中用到了bootstap框架。

例子一、

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
//必须引入下面的路径（这个是绝对路径 ）--博客园老牛大讲堂
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="col-md-3 col-sm-3 col-xs-3">
                <ul id="main-nav" class="nav nav-tabs nav-stacked">
                    <li class="active">
                        <a>
                           
                            <span><font size="4">标题一老牛大讲堂</font></span>
                        </a>
                    </li>
                    <li class="child" style="display: none;padding-left: 40px;">
                        <a target="other" href="../rightfunctionpage/scheduleEntry.html">
                            内容一
                        </a>
                        <a target="other" href="../rightfunctionpage/layoutQuery.html">
                            内容一
                        </a>
                    </li>
                </ul>
                <ul id="main-nav" class="nav nav-tabs nav-stacked">
                    <li class="active">
                        <a>
                           
                            <span><font size="4">标题二老牛大讲堂</font></span>
                        </a>
                    </li>
                    <li class="child" style="display: none;padding-left: 40px;">
                        <a target="other" href="../rightfunctionpage/personnelInformation.html">
                            内容二
                        </a>
                        <a target="other" href="../rightfunctionpage/perfectLogin.html">
                            内容二
                        </a>
                    </li>
                </ul>
                <ul id="main-nav" class="nav nav-tabs nav-stacked">
                    <li class="active">
                        <a>
                          
                            <span><font size="4">标题三老牛大讲堂</font></span>
                        </a>
                    </li>
                    <li class="child" style="display: none;padding-left: 40px;">
                        <a target="other" href="../rightfunctionpage/timeAttendance.html">
                            内容三
                        </a>
                        <a target="other" href=" ">
                            内容三
                        </a>
                        <a target="other" href=" ">
                            内容三
                        </a>
                        <a target="other" href="../rightfunctionpage/customQuery.html">
                            内容三
                        </a>
                    </li>
                </ul>
                <ul id="main-nav" class="nav nav-tabs nav-stacked">
                    <li class="active">
                        <a>
                           
                            <span><font size="4">标题四老牛大讲堂</font></span>
                        </a>
                    </li>
                    <li class="child" style="display: none;padding-left: 40px;">
                        <a target="other" href="../staticpage/manageSystem.html">
                            内容四
                        </a>
                        <a target="other" href="../staticpage/grantSystem.html">
                            内容四
                        </a>
                        <a target="other" href="../staticpage/behaviorSystem.html">
                            内容四
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9" >
                <iframe name="other" src="../staticpage/other.html" runat="server" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
            </div>
        </div>

        <script type="text/javascript">//博客园老牛大讲堂
            $(function() {
                $("#main-nav .active").click(function() {
                    if($(this).next().css('display') == "block") {
                       
                        $(this).next("#main-nav .child").css("display", "none");
                    } else {
                       
                        $(this).next("#main-nav .child").css("display", "block");
                    }
                });
            });
        </script>
    </body>

</html>

其中红色的就是改变伸缩。col-xs-9和col-xs-3去掉。也可以吧col-sm-3和col-sm-9去掉。去掉后效果可以试试。--博客园老牛大讲堂

效果图：

 

posted @ 2016-09-09 08:51  老牛大讲堂  阅读(1248)  评论(0)    收藏  举报