Bootstrap dropdown 使用

同样是2种方式 

参考http://www.bootcss.com/javascript.html#dropdowns

JS方式调用 http://www.w3resource.com/twitter-bootstrap/dropdown.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <link href="../css/bootstrap.css" rel="stylesheet">
    <style type="text/css">

    </style>
    <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.js" type="text/javascript"></script>

</head>

<body>
    <div class="dropdown">
        <!-- 加上data-toggle就使href的链接失效 -->
        <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="page.html"> Dropdown <b class="caret"></b> </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            ...
        </ul>
    </div>

    <div style="margin:50px"></div>
    导航条中的下拉菜单
    <div id="navbar" class="navbar navbar-static">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">Project Name</a><!-- 位于左侧的站标 -->
                <ul class="nav" role="navigation">
                    <!-- ul是导航中的菜单集合 -->
                    <li class="dropdown">
                        <!-- 一个栏目的开始 -->
                        <a id="drop1" href="page.html" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><!-- 改栏目的链接 增加data-toggle="dropdown" 属性就是下拉菜单  -->
                        <!-- class="caret"  是表示下拉菜单的倒三角-->
                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="http://google.com">Action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                            </li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2<b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Another action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                            </li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <a href="rich.html" id="X" role="button" class="" >Menu1</a>
                    </li>
                    <li id="fat-menu" class="dropdown">
                        <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Another action</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                            </li>
                            <li role="presentation" class="divider"></li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <button id="btn1" class="btn" >
        toogle
    </button>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    标签页中的下拉菜单
    <div id="tab" class="bs-docs-example">
        <ul class="nav nav-pills">
            <!--  active 表示默认选中 -->
            <li class="active">
                <a href="#">Regular link</a>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Another action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
                <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Another action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
                <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop5" style="margin-top:-5px;">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Another action</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Something else here</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">Separated link</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- /tabs -->
    </div>

    JS方式
    <div id="byJS" class="bs-docs-example">
        <ul class="nav nav-pills">
            <!--  active 表示默认选中 -->
            <li class="active">
                <a href="#">Regular link</a>
            </li>
            <li class="dropdown" id="accountmenu">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">MySQL</a></li>
                    <li class="divider"></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">HTML5</a></li>
                </ul>
            </li>
        </ul>
        <!-- /tabs -->
    </div>


    <script type="text/javascript">
    $(function() {
        $('#btn1').click(function() {
            $('#byJS .dropdown-toggle').dropdown();
        });
        $("#navbar .dropdown").hover(
            function(){
                $(this).addClass("open");
            },
            function(){
                $(this).removeClass("open");
            }
            );
        $("#tab .dropdown").hover(
            function(){
                $(this).find('.dropdown-menu').show('fast');    
            },
            function(){
                $(this).find('.dropdown-menu').hide('fast');
            }
            );
    });
    </script>

</body>
</html>

 

posted @ 2013-08-26 22:12  cart55free99  阅读(1647)  评论(0编辑  收藏  举报