国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

AngularJS+Bootstrap3多級導航菜單的實現代碼

來源：懂視網 責編：小采 時間：2020-11-27 22:32:32
文檔

AngularJS+Bootstrap3多級導航菜單的實現代碼

AngularJS+Bootstrap3多級導航菜單的實現代碼:將介紹如何用AngularJS構建一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端框架。在當前如此多的web框架下，AngularJS能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新
推薦度：
導讀AngularJS+Bootstrap3多級導航菜單的實現代碼:將介紹如何用AngularJS構建一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端框架。在當前如此多的web框架下，AngularJS能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新

將介紹如何用AngularJS構建一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端框架。在當前如此多的web框架下，AngularJS能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新地把后臺技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫后臺代碼，更規范，更結構化，更可控。

本文將介紹如何實現多限級導航菜單。

bootstrap3-navbar

目錄

1.靜態多級菜單實現

2.動態多級菜單實現

1. 靜態多級菜單實現

要實現多級菜單，我們要分兩步走，第一步就是把靜態菜單的功能實現，通過純靜態的HTML代碼完成。第二步，通過Angluarjs進行動態實現，最后把數據和程序分離，通過Ajax加載多級菜單數據。

我們先從靜態多級菜單開始動手，一個六級導航菜單是什么樣子呢？

m-nav1

如上圖所示，我們定義一些功能需求。

1級菜單是導航條上的文字。

當1級菜單導航事件被觸發，顯示2級菜單導航，在1級菜單的正下方顯示。

當2級菜單導航事件被觸發，顯示3級菜單導航，在2級菜單的右方顯示。

當3級菜單導航事件被觸發，顯示4級菜單導航，在3級菜單的右方顯示。

以此類推，不考慮下級菜單顯示出界問題。

繼續上文中的項目環境，增加一個新HTML文件: page3.html

~ vi D:\workspace\javascript\angular-navbar\page3.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title>多級導航菜單</title>
 <meta name="description" content="多級導航菜單">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page2">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
 <nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >多級菜單導航</a>
 </div>
 <div class="collapse navbar-collapse navbar-ex1-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
 <li class="dropdown">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
 <ul class="dropdown-menu menu-top">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
 <li class="dropdown-submenu"> <a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More options</a>
 <ul class="dropdown-menu">
 <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
 </li>
 <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
 <ul class="dropdown-menu">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
 </li>
 <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
 <ul class="dropdown-menu">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
 </li>
 <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
 <ul class="dropdown-menu">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
 </li>
 </ul>
 </li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </nav>
 </div>
</div>
<script src="https://www.gxlcms.com/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular/angular.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular-route/angular-route.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="https://www.gxlcms.com/js/app.js"></script>
</body>
</html>

新建一個css文件：main.css

~ vi D:\workspace\javascript\angular-navbar\css\main.css
.dropdown:hover .menu-top {
 display: block;
}
.dropdown-submenu{
 position:relative;
}
.dropdown-submenu > .dropdown-menu{
 top:0;
 left:100%;
 margin-top:-6px;
 margin-left:-1px;
 -webkit-border-radius:0 6px 6px 6px;
 -moz-border-radius:0 6px 6px 6px;
 border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
 display:block;
}
.dropdown-submenu > a:after{
 display:block;
 content:" ";
 float:right;
 width:0;
 height:0;
 border-color:transparent;
 border-style:solid;
 border-width:5px 0 5px 5px;
 border-left-color:#cccccc;
 margin-top:5px;
 margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
 border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
 float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
 left:-100%;
 margin-left:10px;
 -webkit-border-radius:6px 0 6px 6px;
 -moz-border-radius:6px 0 6px 6px;
 border-radius:6px 0 6px 6px;
}

刷新一下網頁，我們能就看到上面的截圖的效果，代碼參考：http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/

通過HTML和CSS就實現了多級菜單的靜態展示效果，如果導航菜單不是經常變化，那么用靜態的方式，把代碼寫死就可以了。但有一些場景，菜單是需要動態生成，比如通過權限控制訪問鏈接，每個用戶的權限不一樣，那么能看到的菜單選項也就不一樣，這個時候就需要做成動態的，用程序去控制菜單的加載和展示。

2. 動態多級菜單實現

有了靜態多級導航菜單的HTML代碼結構，改寫成動態的，其實也不太復雜。

我們需要做2件事：

把導航菜單的數據結構化存儲，比如 存放到文件 nav.json。

用Angularjs的API加載nav.json數據，進行展示。

我們先定義一下導航菜單的數據格式，以JSON格式定義，每個菜單項都有3個屬性字段

label: 導航菜單項顯示的名字。

link: 導航菜單項的跳轉鏈接，可以不定義。

children: 導航菜單項的子菜單，循環對象存儲。

{
 "label": "levelA",
 "link": "#",
 "children": [
 {
 "label": "levelB",
 "link": "#",
 "children": []
 }
 ]
}

下面我們用真實的數據定義導航菜單，以我的金融系統為例。

m-nav3

新建JSON數據文件：nav.json。

~ vi D:\workspace\javascript\angular-navbar\js\nav.json
[
 {
 "label": "債券",
 "children": [
 {
 "label": "可轉債",
 "children": [
 {"label": "可轉債溢價率分析","link":"#"},
 {"label": "可轉債NS定價","link":"#"},
 {"label": "可轉債歸因分析","link":"#"},
 {"label": "可轉債套利實時監控","link":"#"}
 ]
 },
 {
 "label": "信用債",
 "children": [
 {"label": "交易所債券監控","link":"#"}
 ]
 },
 {
 "label": "利率債","link":"#",
 "children": []
 },
 {
 "label": "國債期貨",
 "children": [
 {"label": "國債期貨表現分析","link":"#"},
 {"label": "國債期貨實時套利監控","link":"#"},
 {"label": "IRR歷史時間序列查詢","link":"#"},
 {"label": "IRR實時監控","link":"#"}
 ]
 }
 ]
 },
 {
 "label": "股票",
 "children": [
 {
 "label": "基本面分析",
 "children": [
 {"label": "上市公司基本面數據查看","link":"#"}
 ]
 },
 {
 "label": "量化選股策略",
 "children": []
 }
 ]
 },
 {
 "label": "宏觀",
 "children": [
 {
 "label": "宏觀數據",
 "children": [
 {"label": "宏觀數據概覽","link":"#"}
 ]
 },
 {
 "label": "宏觀經濟預測",
 "children": []
 },
 {
 "label": "宏觀經濟和大類資產表現",
 "children": []
 }
 ]
 }
]

我們看到這個導航菜單的數據，有3級，“債券–>可轉債–>可轉債歸因分析”，那么接下我們就直接實現對三級菜單的編程。創建HTML文件page4.html。

~ vi D:\workspace\javascript\angular-navbar\page4.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title>多級動態導航菜單</title>
 <meta name="description" content="多級動態導航菜單">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page4">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
 <nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" href="/" rel="external nofollow" >量化投資平臺</a>
 </div>
 <div class="collapse navbar-collapse navbar-ex1-collapse">
 <ul class="nav navbar-nav">
 <li ng-repeat="a1 in navbar" class="dropdown">
 <a href="?{{ a1.label }}" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">{{ a1.label }} <b class="caret"></b></a>
 <ul class="dropdown-menu menu-top">
 <li ng-repeat="a2 in a1.children" class="dropdown-submenu">
 <a tabindex="-1" href="?{{ a2.label }}" rel="external nofollow" >{{ a2.label }}</a>
 <ul ng-show="a2.children.length>0" class="dropdown-menu">
 <li ng-repeat="a3 in a2.children">
 <a href="?{{ a3.label }}" rel="external nofollow" ng-click="go(a3.link)">{{ a3.label }}</a>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </div>
 </nav>
 </div>
</div>
<script src="https://www.gxlcms.com/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular/angular.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular-route/angular-route.min.js"></script>
<script src="https://www.gxlcms.com/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="https://www.gxlcms.com/js/app.js"></script>
</body>
</html>

在Angularjs的控制器文件app.js文件中，增加page4的定義。

var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']);
page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) {
 $routeProvider
 .when('/', {controller: 'DemoCtrl'})
 .otherwise({redirectTo: '/'});
 $locationProvider.html5Mode(true);
}]);
page4.controller('NavbarCtrl', function ($scope,$http,$location) {
 $http.get("/js/nav.json").success(function(json){
 $scope.navbar = json;
 });
});
page4.controller('DemoCtrl', function () {
 // nothing
});

查看一下顯示效果，與上面的截圖類似。

m-nav4

文章到這里就結束了，已經實現了我的功能需求。但這個話題還有很多可以優化的地方，比如實現無限級的導航菜單，菜單的展示樣式替換，展示區間的控制，鼠標動作事件，封裝成Angularjs的插件開源項目等。有興趣的同學，可以我的程序的基礎上繼續努力，做出優秀的開源項目來。

代碼已上傳到github：https://github.com/bsspirit/angular-navbar，同學可以根據需要自行下載，也可以直接通過命令下載代碼。

git clone https://github.com/bsspirit/angular-navbar.git
cd angular-navbar
bower install
anywhere

總結

以上所述是小編給大家介紹的AngularJS+Bootstrap3多級導航菜單的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

AngularJS+Bootstrap3多級導航菜單的實現代碼

AngularJS+Bootstrap3多級導航菜單的實現代碼:將介紹如何用AngularJS構建一個強大的web前端系統。angularjs是由Google團隊開發的一款非常優秀web前端框架。在當前如此多的web框架下，AngularJS能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新
推薦度：
標簽： 實現 js 代碼
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 国产精品久久久久久久免费 | 视频一区 中文字幕 | xx欧美| 亚洲小说欧美激情另类 | 一本色道久久88综合亚洲精品高清 | 五月天婷婷基地 | 美女视频黄a视频全免费应用 | 欧美综合国产精品日韩一 | 国产一区亚洲欧美成人 | 精品国产一区二区三区免费看 | 日韩免费在线观看视频 | 韩日视频在线 | 国产一区二区三区成人久久片 | 欧美中出 | 中文字幕精品一区二区精品 | 97在线视频免费 | 国产亚洲一欧美一区二区三区 | 国产在线中文字幕 | 亚洲十欧美十日韩十国产 | 啪啪免费网址 | 高清国产一区 | 一区一精品 | 亚洲精品视频免费在线观看 | 黄色一级视频免费看 | 国产成人综合精品一区 | 亚洲日韩欧美视频 | 欧美一区二区三区四区在线观看 | 欧美日本一道本 | 国产精品永久免费自在线观看 | 欧美日韩成人在线视频 | 一本久道久久综合 | 成人美女黄网站色大色费 | 中文字幕日韩欧美 | 亚洲欧美另类自拍 | 国产最新网站 | 欧美在线aa| 么公又大又硬又粗又爽的视频 | 国产原创一区 | 国产精品网站在线进入 | 久久亚洲精选 | 国产91久久久久久久免费 |