bootstrap響應式二級導航菜單

一、解釋

1、bootstrap提供的二級導航菜單只能實現點擊下拉框式的實現效果，不能實現鼠標移動顯示下拉框，也不能實現點擊一級導航的連接跳轉

 

 

 

 2、現在實現

　　效果一：鼠標移動出現二級菜單

　　效果二：在有二級菜單的一級菜單下可以加鏈接，但是在手機的效果下屏蔽一級菜單的鏈接，PC端可以正常訪問鏈接

 

二、代碼

<div class="collapse navbar-collapse nav-list" id="probootstrap-menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a class="nav-link" href="index.html">網站首頁</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false" href="about.html">關於我們</a>
            <ul class="dropdown-menu">
              <li><a class="nav-link" href="./about_list.html">公司簡介</a></li>
              <li><a class="nav-link" href="./about_list.html">公司文化</a></li>
              <li><a class="nav-link" href="./about_list.html">組織架構</a></li>
              <li><a class="nav-link" href="./about_list.html">員工風采</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false" href="services.html">業務介紹<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a class="nav-link" href="#">業務范圍</a></li>
              <li><a class="nav-link" href="#">貸款須知</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="products.html">政策法規</a></li>
          <li class="nav-item"><a class="nav-link" href="recruitment.html">招賢納士</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">聯系我們</a></li>
        </ul>
      </div>

 

1、實現效果一

.nav-list .navbar-nav>li:hover .dropdown-menu { display: block;
}

2、實現效果二

<script>
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      // alert("當前是電腦打開");
      $(document).ready(function () { $(document).off('click.bs.dropdown.data-api'); });
    }
  </script>