把bootstrap默认的click改成hover事件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>改变bootstrap的默认导航栏onclick,编程hover，小于767之后又恢复onclick</title>
    </head>
    <link rel="stylesheet" type="text/css" href="public/css/bootstrap3.3.7.css" />
    <link rel="stylesheet" type="text/css" href="public/css/style.css" />
    <body>
<nav class="navbar navbar-inverse">
  <div class="container">
    <!-- 显示隐藏的按钮 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- 内容 -->
    <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
    
      <ul class="nav navbar-nav">
        <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle"  role="button" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu clearfix">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </body>
</html>

css

<style type="text/css">
          @media (min-width: 768px) and (max-width: 991px) {
            .dropdown .dropdown-menu {
              display: none;
            }

            .dropdown:hover .dropdown-menu {
              display: block;
            }
          }

          @media (min-width: 992px) and (max-width: 1199px) {
            .dropdown .dropdown-menu {
              display: none;
            }

            .dropdown:hover .dropdown-menu {
              display: block;
            }
          }

          @media (min-width: 1200px) {
            .dropdown .dropdown-menu {
              display: none;
            }

            .dropdown:hover .dropdown-menu {
              display: block;
            }
          }
    </style>

js

 <script type="text/javascript" src="public/js/jquery-2.1.4.js"></script>
     <script type="text/javascript" src="public/js/bootstrap3.3.7.js"></script>
    <script type="text/javascript">
            $(function(){
              // 用定时器的做法
               //        function demo(){
               //      if($(document.body).width()<767){
               //          $(".dropdown-toggle").attr("data-toggle","dropdown");    
               //    }else{
               //        $(".dropdown-toggle").attr("data-toggle"," ");   
               //    }
               //   return console.log($(document.body).width());
               //    // 怎么动态的让这个获取屏幕宽度的数字进行变化，而不是我每次F5刷新页面进行更新变化
               //    // 我想到的是setInterval定时器,但是太费性能了，还有其他思路吗
               //  }    
               // setInterval(demo,1000) 
                var demo = null;

                function resi() {
                    demo = $(document.body).width();
                    if (demo < 767) {
                        $(".dropdown-toggle").attr("data-toggle", "dropdown");
                    } else {
                        $(".dropdown-toggle").attr("data-toggle", " ");
                    }
                    demo = $(document.body).width();
                }
                resi();

                $(window).resize(function() { //动态判断窗口大小
                    resi(); console.log(demo)
                })                

            })            
     </script>

 

posted @ 2017-04-09 15:21  xuanPhoto  阅读(271)  评论(0)    收藏  举报