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

最简单的鼠标悬停,实现下拉列表功能 bootstrap

2017-02-17 09:58 423 查看
<html> //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用

    <head>


        <meta charset="UTF-8">

            <!-- 引入 Bootstrap -->

      <link href="../css/bootstrap.min.css" rel="stylesheet">

          <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

        <script src="../libs/jquery-1.11.1.js"></script>

        <script src="../js/bootstrap.min.js"></script>

        <title></title>

    </head>

    <body>

<div class="dropdown" >

            <span class="dropdown-toggle"  data-toggle="dropdown" data-target="#" >触发器</span>

              <ul class="dropdown-menu" >

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

            </ul>

        </div>

        <script>

            $(document).ready(function(){

                $("span").hover(function(){//鼠标悬停触发事件

                $(".dropdown-toggle").dropdown('toggle');

                });

            });

        </script>

    </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap 鼠标悬停 实现下拉功能
相关文章推荐
新的分享
章节导航