整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          每日分享- js 結合 HTML DOM 如何實現聯動菜單

          動菜單通常是指一個下拉框的選項值發生改變后,另一個下拉框的選項值會發生對應的變化。在 HTML 頁面中,可以使用 JavaScript 結合 HTML DOM 來實現這一功能。下面我來舉一個例子。

          假設我們有三個下拉框,分別是“省份”、“城市”和“區縣”。當“省份”下拉框的選項值發生改變時,我們需要動態更新“城市”下拉框的選項值,并且根據“城市”的選項值動態更新“區縣”下拉框的選項值。具體實現步驟如下:

          1 首先在 HTML 文件中定義三個下拉框,并分別給它們一個唯一的 ID,如下所示:

           <label>省份:</label>
          <select id="province"></select>
          
          <label>城市:</label>
          <select id="city"></select>
          
          <label>區縣:</label>
          <select id="district"></select>

          2 在 JavaScript 中定義三個函數,分別用于更新“城市”、“區縣”下拉框的選項值,以及初始化頁面時的默認值:

           // 更新城市下拉框內容
          function updateCity() {
            var provinceSelect = document.getElementById("province");
            var citySelect = document.getElementById("city");
            citySelect.innerHTML = ""; // 清空城市下拉框內容
          
            // 根據選中的省份,獲取該省份對應的城市列表
            var provinceName = provinceSelect.value;
            var cityList = getCityList(provinceName);
          
            // 根據城市列表,動態生成城市下拉框的選項
            for (var i = 0; i < cityList.length; i++) {
              var option = document.createElement("option");
              option.text = cityList[i];
              citySelect.add(option);
            }
          
            // 觸發區縣下拉框更新
            updateDistrict();
          }
          
          // 更新區縣下拉框內容
          function updateDistrict() {
            var citySelect = document.getElementById("city");
            var districtSelect = document.getElementById("district");
            districtSelect.innerHTML = ""; // 清空區縣下拉框內容
          
            // 根據選中的城市,獲取該城市對應的區縣列表
            var cityName = citySelect.value;
            var districtList = getDistrictList(cityName);
          
            // 根據區縣列表,動態生成區縣下拉框的選項
            for (var i = 0; i < districtList.length; i++) {
              var option = document.createElement("option");
              option.text = districtList[i];
              districtSelect.add(option);
            }
          }
          
          // 初始化頁面
          function initPage() {
            var provinceSelect = document.getElementById("province");
            var citySelect = document.getElementById("city");
            var districtSelect = document.getElementById("district");
          
            // 根據省份列表,動態生成省份下拉框的選項
            for (var i = 0; i < provinceList.length; i++) {
              var option = document.createElement("option");
              option.text = provinceList[i];
              provinceSelect.add(option);
            }
          
            // 觸發城市下拉框更新
            updateCity();
          }

          現在我們已經完成了省份和城市兩個下拉框的聯動效果,接下來我們需要再次綁定城市下拉框的change事件,以實現城市與區縣下拉框的聯動。

          首先,我們需要在HTML中添加第三個下拉框,用于選擇區縣:

          <select id="county"></select>

          然后,我們需要更新updateCity和initPage兩個函數,使其能夠更新城市和區縣兩個下拉框:

          function updateCity() {
            var province = document.getElementById('province').value;
            var cityOptions = '';
            for (var i = 0; i < cities[province].length; i++) {
              cityOptions += '<option value="' + cities[province][i] + '">' + cities[province][i] + '</option>';
            }
            document.getElementById('city').innerHTML = cityOptions;
          
            // 清空區縣下拉框
            document.getElementById('county').innerHTML = '<option value="">--請選擇--</option>';
          }
          
          function updateCounty() {
            var province = document.getElementById('province').value;
            var city = document.getElementById('city').value;
            var countyOptions = '';
            for (var i = 0; i < counties[province][city].length; i++) {
              countyOptions += '<option value="' + counties[province][city][i] + '">' + counties[province][city][i] + '</option>';
            }
            document.getElementById('county').innerHTML = countyOptions;
          }
          
          function initPage() {
            // 初始化省份下拉框
            var provinceOptions = '<option value="">--請選擇--</option>';
            for (var province in cities) {
              provinceOptions += '<option value="' + province + '">' + province + '</option>';
            }
            document.getElementById('province').innerHTML = provinceOptions;
          
            // 綁定省份下拉框的change事件
            document.getElementById('province').addEventListener('change', updateCity);
          
            // 初始化城市下拉框
            updateCity();
          
            // 綁定城市下拉框的change事件
            document.getElementById('city').addEventListener('change', updateCounty);
          
            // 初始化區縣下拉框
            updateCounty();
          }

          在updateCity函數中,我們添加了清空區縣下拉框的代碼,以確保每次更改城市時,區縣下拉框都會被清空。

          在updateCounty函數中,我們根據選擇的省份和城市,動態生成區縣下拉框的選項。

          在initPage函數中,我們綁定了城市下拉框的change事件,并調用updateCounty函數初始化區縣下拉框的選項。

          最后,我們需要在JavaScript代碼中定義counties變量,以存儲每個城市對應的區縣信息:

          var counties = {
            "北京市": {
              "市轄區": ["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "豐臺區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區"],
              "縣": ["密云縣", "延慶縣"]
            },
            "上海市": {
              "市轄區": ["黃浦區", "盧灣區", "徐匯區", "長寧區", "靜安區", "普陀區", "閘北區", "虹口區", "楊浦區", "閔行區", "寶山區", "嘉定區", "浦東新區", "金山區", "松江區", "青浦區", "南匯區", "奉賢區"],
              "縣": ["崇明縣"]
            },
            // 省略部分數據...
          };

          接下來是第三個函數setDefaultValue(),用于初始化頁面時設置默認值。在這個函數中,我們先根據省份的默認值設置省份下拉框的選中項,然后根據省份和城市的默認值,從數據中獲取相應的區縣數據,并設置區縣下拉框的選項。

          function setDefaultValue() {
            // 設置省份下拉框默認選中項
            var provinceSelect = document.getElementById("province");
            for (var i = 0; i < provinceSelect.options.length; i++) {
              if (provinceSelect.options[i].value === defaultProvince) {
                provinceSelect.selectedIndex = i;
                break;
              }
            }
            
            // 根據省份和城市設置區縣下拉框選項
            var citySelect = document.getElementById("city");
            var districtSelect = document.getElementById("district");
            var districtData = data[defaultProvince][defaultCity];
            districtSelect.options.length = 0; // 清空區縣下拉框
            for (var i = 0; i < districtData.length; i++) {
              var option = new Option(districtData[i], districtData[i]);
              if (districtData[i] === defaultDistrict) {
                option.selected = true; // 設置默認選中項
              }
              districtSelect.options.add(option);
            }
          }

          在這個函數中,我們首先獲取省份下拉框的DOM元素,并通過循環找到選中項為默認省份的選項,并設置為選中狀態。然后獲取城市和區縣的DOM元素,并從數據中獲取對應的區縣數據。最后根據區縣數據動態創建選項,并設置默認選中項。注意,在設置區縣下拉框的選項時,我們先要將下拉框的長度設為0,以清空之前的選項。同時,我們還需要為新創建的選項設置selected屬性,以設置默認選中項。

          以上就是一個簡單的基于JavaScript和HTML DOM實現聯動菜單的示例,可以根據具體的業務需求進行擴展和修改。

          拉菜單可以說是UI設計中最普遍使用的設計元素之一了。它們因為能夠有效節省界面空間、操作簡單、體驗絕佳等優點,而被廣泛應用到網頁或App界面導航、搜索以及選擇模塊設計之中。本篇文章,摹客為大家整理了40個最新創意下拉菜單設計實例和技巧,以供廣大設計師欣賞、學習和借鑒。

          30個最新優質下拉菜單設計實例, 輕松帶給你設計靈感

          1.Converse

          Converse是一個在線售賣最新衣物、鞋子和旅行裝備的時尚網站。它的首頁選用了點擊可觸發的下拉菜單式導航設計。整個下拉菜單,最大的特色就是添加了非常豐富的鼠標懸浮特效,以幫助用戶快速聚焦各個選項。兩欄的布局設計,直觀易讀,也方便用戶快速查看和選擇。

          2.Santa Cruz

          Santa Cruz 是一個網上的自行車商店。它的下拉菜單導航,利用大量“圖片+文字”的卡片設計,直接清晰地展示了網站的各類商品。如此,用戶通過導航菜單,就能提前對各個商品有所了解,并快速選擇。省略掉用戶需要逐一點開、查看詳情并最后才能做出選擇的復雜過程,非常實用。適合各類在線商店學習和借鑒。

          3.Helias Oils

          Helias Oils 是一個在線精油網站。它的首頁也選用了點擊可觸發的下拉菜單式導航。除了豐富的懸浮特效,設計師還添加了炫酷的波浪式轉場動效,吸引用戶停留的同時,也快速引導用戶做出選擇。

          4.Whirling CSS3 Drop Down Menu

          Whirling CSS3 Drop Down Menu 是一款視覺效果極佳的CSS導航下拉菜單模板設計。它最有趣的地方就是添加了十分新穎的扭轉展開式動效。適合各類暗黑風網頁設計使用。感興趣的設計師,可以點擊“返回教程”查看制作詳情。

          5.Lion Burger

          Lion Burger 是一個使用按鈕式下拉菜單導航的網站。它最值得關注的就是下拉菜單所選用的配色。紅色選項搭配白色文案的設計,清晰展示菜單選項內容的同時,也與主頁黑色背景形成鮮明對比,讓用戶不自覺的將關注點放在導航上。

          6.CSS3 Slide Drop Down Box Menu

          CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜單式導航設計。鼠標指向主菜單選項時, 相應的模塊圖片和菜單列表也會隨即展示。菜單選項向左、向右自動滑出的動效設計,也極賦創意。感興趣的小伙伴,可以下載看看。

          7.Responsive Drop Down Navigation Menu

          Responsive drop down navigation menu 是一款為專為Bootstrap網頁模板而特制的下拉菜單導航。整個導航分為四欄,前三欄通過純文本設計,依次羅列了商品不同分類下的各個選項,而最后一欄則通過商品圖片輪播設計,引導用戶選擇, 結構分明,布局清晰,任何用戶都能快速熟悉并按需選擇。適合具有類似清晰產品分類的網頁或App借鑒。

          8.Drop Down Menu Bryan

          Drop Down Menu Bryan 是一款三級下拉菜單導航設計。用戶點擊左上角的導航按鈕,各級菜單就會隨即一步步展示,輕松引導用戶快速找到所需選項。適合具有復雜導航系統的網站借鑒和使用。

          9.PopSockets

          PopSockets 是一款色彩豐富的概念性下拉菜單導航設計。整個導航設計除了高效直觀的四欄布局,還添加了多彩的產品繪畫進行點綴,精美實用。

          10.Minimal Drop Down Menu Exploration

          Minimal Drop Down Menu Exploration 是一款典型的極簡風下拉菜單導航設計。整個網頁的主菜單導航欄,直接簡化成了細小的色彩條。鼠標懸浮,相關菜單選項才會隨即展開。鼠標離開后,又立即收起。反應靈敏,簡潔高效。各類極簡風網頁不妨學習一下。

          11.Creative Drop Down Menu with Icons

          Creative Drop Down Menu with Icons 是一個結構分明的下拉菜單導航。藍色背景搭配白色選項,美觀時尚。鏤空的圖標點綴,也有力突出了每個選項,讓整個菜單結構布局更加清晰。

          12.Zenith Arena De Lille Drop Down Menu

          Zenith Arena De Lille Drop Down Menu 是一個專為室內競技場網站而打造的下拉菜單導航。不同于一般網頁通過添加蒙版或新窗口的方式,展示下拉菜單,該款設計直接將菜單融合在界面主頁上,點擊觸發,整個頁面也會隨之展開或隱藏,操作展示更便捷。對類似菜單展示方式感興趣的設計師,可以了解一下。

          13.SkySmile Drop Down Menu


          Sky Smile Drop Down Menu最值得學習的地方就是選用了漸變色菜單背景。這樣的設計,不僅成功突出了下拉菜單內容,還輕松與網站的主體配色相呼應,確保了網頁整體設計風格的一致性。

          14.Minimal Drop Down Menu Interaction

          Minimal Drop Down Menu Interaction 是一款專為簡約風懸浮導航按鈕而打造的下拉菜單設計。整個菜單和選項都由簡單的圖標構成, 適用于各類簡約風App設計。

          15.Mobile App Drop Down Menu

          Mobile App Drop Down Menu 是另一個簡約風App可參考的導航按鈕設計。除了極簡的圖標導航菜單,此款設計還添加了橫向滑出動效,更加生動地展示低一級的菜單選項,吸引用戶關注。

          16.Notification Drop Down Box Design

          Notification Drop Down Box Design 是一個消息提示類下拉菜單設計。用戶指向頂部的消息提示圖標,菜單隨即展開,清晰呈現相關涉及人員、發送時間以及消息內容等信息,實用性極強。

          17.Notification Drop Down Menu

          Notification Drop Down Menu 是另一款專為消息提示設計打造的下拉菜單。不同于上一個案例,布滿圖片和文字,此款設計外觀上更加簡約美觀。可愛的卡通貓繪畫,也無形中引導用戶快速聚焦于當前的選中項,幫助他們快速做出選擇。

          18.HTML Drop Down Menu Animation

          HTML Drop Down Menu Animation 也是一個極簡的導航按鈕下拉菜單設計,提供免費的HTML、CSS以及JS源代碼資源。它最值得效仿的地方,就是為下拉菜單添加了逐一展開各個選項的動效設計,個性而獨特。

          19.About Us Drop Down Menu Animation

          About Us Drop Down Menu Animation 是一個專為網頁“關于我們”的導航模塊而設計的下拉菜單。整個設計最亮眼的地方就是添加了菜單彈出動效,靈動而富有活力。單個選項"圖標+文案"的組合設計,也極大方便用戶清晰查看各個選項。

          20.Interactive Drop Down Menus

          Interactive Drop Down Menus 是一款專為搜索過濾器而打造的交互式下拉菜單設計。用戶展開菜單,即可根據需要選擇篩選條件。整個下拉菜單,組件豐富,結構分明,值得借鑒。

          21.Shop Drop Down Menu

          Shop Drop Down Menu 是一款僅由圖標按鈕打造的下拉菜單導航設計。

          22.Mini Cooper

          Mini Cooper 是寶馬旗下Mini Cooper汽車的官方網站。它的下拉菜單導航,結構清晰,選擇多樣,特效豐富,引導力極強。

          23.Board Star

          Board Star 是一個在線的滑雪用品售賣店。它的導航欄也選用了下拉菜單式設計。卡片式布局,直觀易用。復古風外觀,也讓用戶輕松記住該網站或品牌。

          24.Porsche

          Porsche 是德國保時捷汽車的官方網站。它的導航采用聯動式下拉菜單設計,以引導用戶快速查看和選擇所需車型。

          25.Audi

          Audi 是德國奧迪汽車的官方網站。它的網站也選用了聯動式下拉菜單導航設計。但相較于Porsche, 它則選用了完全不同的布局方式。感興趣的設計師,可以對比兩款設計,尋求設計靈感。

          26.Sony Play Station

          Sony Play Station 采用了橫向展開的圖標菜單導航,簡單的文字介紹,也加深了用戶對各個選項的理解。

          27.Mr Clean

          Mr Clean 直接通過產品圖片展示下拉菜單的各個選項,清晰易用,方便選擇。

          28.KFC

          KFC 采用了豎式下拉菜單設計。它的菜單展示動畫也十分新穎。

          29.Taco Bell

          Taco Bell 是一個在線的美食查找網站。側邊導航欄搭配豎式下拉菜單的設計,也是很有創意了。

          30.Bern Tourism

          Bern Tourism 也選用了下拉菜單式導航設計。為更好的引導用戶,下拉菜單內還加入了更為高效的標簽導航欄,以方便用戶根據需要點擊查看不同標簽下的各個選項。

          此外,我們也總結出了10個主要的設計技巧

          1. 下拉級別不宜過多(最好不要超過兩級)

          事實上,下拉級別過多或過于復雜的菜單設計,不僅操作起來麻煩,有時還會讓用戶無所適從,失去焦點,而無法做出選擇,用戶體驗極差。所以,菜單級別不宜設置太多,保持在一到兩級就好。

          比如Slack官網導航(如下圖),就選用了干練的兩級下拉菜單設計,直觀清晰地展示了網站提供的各類資源。

          當然,如若網站導航確實較多、較復雜,必須采用兩級以上下拉菜單時,也需注意添加一些懸浮或選中動效,逐步引導用戶查看和選擇。

          如下圖,WooCommerce的官方網站,就添加了極具引導性的鼠標懸浮動效,逐步指引用戶查看各類選項, 并按需做出選擇:

          2. 打造清晰的菜單結構

          當然,除了下拉級別,菜單整體的視覺層次結構,也極為重要。設計師需要集中考慮菜單整體的字體排版、行高行距、結構布局等等視覺元素,打造真正層次分明,一目了然的菜單設計。

          以下面一款主營音樂器材的網站為例, 設計師就選用戶了不同色彩、字體以及字體尺寸,構建出結構分明的下拉菜單。

          3. 添加選擇或鼠標懸浮特效,優化菜單查看和選擇過程

          豐富的菜單選中或鼠標懸浮特效,不僅能夠幫助用戶快速聚焦當前選項,優化菜單查看和選擇過程, 還能有效提升整個菜單的視覺吸引力,降低網站或App的跳出率。

          所以,設計師在設計如圖下拉菜單時,也可嘗試添加吸睛的懸浮或選中特效,幫助用戶快速選擇所需內容:

          此外,添加懸浮特效時,

          設計師也需注意特效打開和關閉的時間。太快或太慢,都有可能會影響到用戶體驗,而引起反效果。

          4. 添加圖片或圖標,優化菜單選項設計

          當然,除了利用字體排版和行高行距等視覺元素,打造清晰的全局菜單結構布局,設計師也可嘗試添加圖標或圖片,突出單項的菜單選擇,引導用戶聚焦和選擇。

          例如, 下面的JetBlue網頁,頂部的下拉菜單式導航,就選用了大量簡易圖標和高清圖片,簡單化菜單選項的同時,也有效提升整款設計的實用性和趣味性。

          5. 確保菜單與網頁或App風格樣式的一致性

          不管哪種類型的下拉菜單設計,它們無疑都是網頁或App設計的一部分,需要與網站或App整體的設計風格一致。簡單來講,就是需要在配色、字體以及圖標樣式等方面,盡量與全局風格保持一致。

          以戴爾官方網站為例,整個網頁采用了經典的藍白配色,它的下拉菜單導航設計,也沿用這一配色,白色菜單背景搭配藍色選項和引導性箭頭圖標,與主頁有所區別,又相互映襯。

          6. 無效或禁用選項應置灰

          當菜單內某個選項失效或不可用時,盲目地直接刪除往往會破壞整個菜單的結構布局,影響用戶查看和選擇。這時,不如直接置灰將該選項,以預示其“被禁用”或“不可用”的狀態。此外,當用戶在該選項停留時間較長時,可嘗試添加一定提示信息,解釋相關禁用原由。

          7.添加展開動畫或交互,賦予菜單活力

          除了懸浮或選中特效,適當地添加菜單展開動畫或交互(例如常見的劃入、推入、翻轉等),也能賦予菜單活力,增強其趣味性。

          例如,以下一款名為Mediate的網頁模板,就采用了獨特的滑動動畫,以吸引用戶注意。

          8. 利用半透明背景,突出菜單設計

          設計過程中,為突出菜單內容,設計師也需要注意菜單背景的設計。例如,設計師可嘗試添加半透明背景或背景圖,以突出整個菜單。

          就像下圖中Econsultancy官網的導航設計,菜單呈現的白色選項,很容易受到主頁白色背景干擾,而影響用戶體驗。為改變這一情況,設計師就直接選用了半透明的黑色背景,輕松突出選項內容的同時,也順利對菜單和主頁進行了視覺上的區分。

          9. 利用鮮亮的純色或圖片背景,突出菜單設計

          當然,除了半透明的菜單背景,對比鮮明的純色背景或背景圖,也是不錯的選擇。

          例如,下面的家具類電商網頁,就選用了鮮亮的桃紅色突出下拉菜單,效果極好。

          10. 不斷測試

          同其它網頁或App設計模塊一樣,下拉菜單也需要不斷測試,以確保所有選項或動效都正常運行。尤其是當用于導航設計,并添加一定動效或交互時, 不僅需要不定時測試菜單的加載時間,還需要不斷測試,以獲取最佳的鼠標懸浮打開和關閉的時間,以確保用戶體驗達到最佳。

          如何快速打造最優下拉菜單設計?

          了解完以上設計案例和技巧之后,下拉菜單究竟該如何設計呢?以下是設計師們常用的兩種方法:

          1. 采用HTML或CSS設計模板,快速搭建

          對UI/UX設計師而言,搭建最優下拉菜單,最快的方法就是選用現成的設計模板。事實上,現今市場上有很多類似的HTML或CSS設計模板,免費或付費的都有。感興趣的設計師,可以在線搜索看看。

          2. 選擇高效的設計工具,快速從頭設計

          當然,不需要模板的設計師,也可選擇一款高效的設計工具,快速從頭開始設計。而摹客作為一個設計+協作的一站式云平臺,不僅能夠幫助設計師們從頭快速搭建網頁或App設計原型,還能及時分享給其他團隊成員(例如其他設計師、產品經理或開發人員),實現在線審閱、討論、分享、測試以及交付,簡化整個產品設計和開發過程。

          結語

          創意實用的下拉菜單設計, 不僅能夠節省界面空間,還能夠有效提升用戶體驗,降低網站或App跳出率。

          希望以上介紹的40個下拉菜單設計實例和技巧,能對大家有所幫助。

          ~此文轉載自UI設計派,如有侵權,請聯系刪除

          用工具:關注私聊獲取編譯軟件+源代碼

          功能演示

          功能演示


          代碼如下

          <!DOCTYPE html>
          <html>
          	<head>
          		<meta charset="utf-8">
          		<title></title>
          		<style type="text/css">
          			/* //將內邊距,外邊距設置為0 .默認都是存在外邊距內邊距的 */
          			* {
          				padding: 0px;
          				margin: 0px;
          				list-style: none;
          				margin: auto;
          			}
          
          			/* //設置一級列表的寬度,背景 */
          			.lii {
          				background-color: yellow;
          				width: 110px;
          				border-right: 1px solid;
          				border-left: 1px solid;
          			}
          
          			/* //設置二級列表的框線,寬,背景 */
          			.ul li {
          				border: 1px solid;
          
          				width: 110px;
          				background-color: red;
          			}
          		</style>
          		<!-- //加載jquery文件 -->
          		<script type="text/javascript" src="js/jquery-3.4.1.js">
          
          		</script>
          		<script type="text/javascript">
          			//文檔就緒函數
          			$(function() {
          				//一級列表的點擊事件
          				$(".lii").click(function() {
          					//slideToggle是slideUp() 和 slideDown() 之間的切換:
          					//children()子元素,點擊區域的子元素上滑消失或下滑出現
          					$(this).children().stop().slideToggle(500);
          				})
          			})
          		</script>
          	</head>
          	<body>
          		<div id="d">
          			<!-- 無序列表 -->
          			<ul id="li">
          				<!-- 一級列表001 -->
          				<li class="lii">一級列表001
          					<!-- 二級列表001 -->
          					<ul class="ul">
          						<li>二級列表001-1</li>
          						<li>二級列表001-2</li>
          						<li>二級列表001-3</li>
          						<li>二級列表001-4</li>
          						<li>二級列表001-5</li>
          					</ul>
          				</li>
          				<!-- 一級列表002 -->
          				<li class="lii">一級列表002
          					<!-- 二級列表002 -->
          					<ul class="ul">
          						<li>二級列表002-1</li>
          						<li>二級列表002-2</li>
          						<li>二級列表002-3</li>
          						<li>二級列表002-4</li>
          						<li>二級列表002-5</li>
          					</ul>
          				</li>
          				<!-- 一級列表003 -->
          				<li class="lii">一級列表003
          					<!-- 二級列表003 -->
          					<ul class="ul">
          						<li>二級列表003-1</li>
          						<li>二級列表003-2</li>
          						<li>二級列表003-3</li>
          						<li>二級列表003-4</li>
          						<li>二級列表003-5</li>
          					</ul>
          				</li>
          			</ul>
          		</div>
          	</body>
          </html>
          

          0基礎學編程,純干貨,關注【一只聯動貓】不迷路


          主站蜘蛛池模板: 一区高清大胆人体| 日本一区二区在线播放| 国产成人精品一区二区三区| 日韩一区二区三区免费播放| 一区二区三区免费电影| 熟妇人妻一区二区三区四区| 日韩一区二区三区无码影院| 亚洲.国产.欧美一区二区三区| 久久一区二区三区精华液使用方法| 国产大秀视频一区二区三区| 丝袜无码一区二区三区| 亚洲午夜一区二区电影院| 中文字幕无码不卡一区二区三区| 成人久久精品一区二区三区| 无码少妇一区二区浪潮av| 少妇激情一区二区三区视频| 手机福利视频一区二区| 真实国产乱子伦精品一区二区三区| 无码乱人伦一区二区亚洲| 国产欧美一区二区精品仙草咪| 一区二区网站在线观看| 亚洲国产韩国一区二区| 日本一区视频在线播放| 亚洲一区二区影院| 精品一区二区三区中文| 人妻AV一区二区三区精品| 国产一区二区三区在线观看免费| 日本一区二区三区精品中文字幕| 精品动漫一区二区无遮挡| 亚洲欧洲一区二区三区| 伊人久久精品一区二区三区| 东京热无码av一区二区| 亚洲乱码av中文一区二区| 国产在线精品一区二区三区不卡| 亚洲欧美成人一区二区三区| 亚洲AV本道一区二区三区四区 | 亚洲一区视频在线播放| 国产91大片精品一区在线观看| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 无码精品不卡一区二区三区| 国偷自产一区二区免费视频|