Bootstrap 下拉選單多級聯動
直接上乾貨
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/> <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <style type="text/css"> .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; 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: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .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; } </style> </head> <body> <div class="container"> <div class="row"> <div class="form-group"> <input type="hidden" name="category_id" id="category_id" value="" /> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;"><span id="select-title">選擇分類</span> <span class="caret"></span></a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="javascript:;" data-index="1" data-title="一級選單">一級選單</a></li> <li class="dropdown-submenu"> <a href="javascript:;" data-index="2" data-title="一級選單">一級選單</a> <ul class="dropdown-menu"> <li><a data-index="2-1" href="javascript:;" data-title="二級選單">二級選單</a></li> </ul> </li> <li class="dropdown-submenu"> <a tabindex="3" href="javascript:;" data-title="一級選單">一級選單</a> <ul class="dropdown-menu"> <li><a tabindex="3-1" href="javascript:;" data-title="二級選單">二級選單</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a href="javascript:;" data-index="3-2" data-title="二級選單">二級選單</a> <ul class="dropdown-menu"> <li><a href="javascript:;" data-index="3-2-1" data-title="三級選單">三級選單</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> $('.dropdown li a').click(function(){ console.log(this); title = $(this).attr("data-title"); id = $(this).attr("data-index"); $("#select-title").text(title); $("#category_id").val(id); }) </script>
相關推薦
Bootstrap 下拉選單多級聯動
直接上乾貨 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示
修改bootstrap下拉選單的寬度
<!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" a
Bootstrap -- 下拉選單、輸入框組、導航選單
Bootstrap -- 下拉選單、輸入框組、導航選單 1. 下拉選單 可以使用帶有各種大小按鈕的下拉選單：.btn-lg、.btn-sm 或 .btn-xs。 實現下拉選單： <!DOCTYPE html> <html> <head> <
bootstrap 下拉選單（10）
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題 &l
bootstrap(下拉選單與滾動監聽)
下拉選單（Dropdown） ☑ LESS版本：對應的原始檔dropdowns.less <h3>示例1</h3> <div class="navbar navbar-default" id="navmenu"&g
Bootstrap下拉選單使用方法
如何使用Bootstrap下拉選單元件 Bootstrap下拉選單元件使用起來非常容易，首先你需要定義一個class="dropdown"的div，然後在這個div標籤中寫入觸發下拉框的按鈕以及對應的下拉選單，類似程式碼如下：<div class="dropdo
解決bootstrap下拉選單無法隱藏的問題
下拉選單的兩種實現 想必大家都知道，bootstrap為我們提供了一個下拉選單的元件，官方也為我們提供兩種使用方法 1.標籤指定data-toggle <div class="dropdown"> <button type="
用JS實現下拉選單的聯動
需求：用JS實現一個下拉選單，要求在選中“地區”選單中相應的地區時，自動在“國家”選單中 出現相應的國家。 <!DOCTYPE html> <html> <head&g
android下拉選單三級聯動
package com.example.spinner; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import an
Bootstrap 下拉選單和滾動監聽（Scrollspy）外掛
一、下拉選單外掛 切換下拉選單（Dropdown）外掛的隱藏內容：（1）通過 data 屬性：向連結或按鈕新增 data-toggle="dropdown" 來切換下拉選單：<div class="dropdown"> <a data-toggle="
bootstrap下拉選單無效的解決方法之一
問題背景：lz在使用bootstrap遇到下拉列表無效問題，lz引用的jQuery檔案為jquery-1.8.2.min.js，bootstarp檔案為bootstrap.min.css、bootst
Bootstrap下拉選單、按鈕式下拉選單
1. 概述 下拉選單使用頻率也是比較高的，比較常見的使用場景是在導航選單欄，某個主選單含有下拉的子選單。 Bootstrap為下拉選單提供了兩種實現方式，即普通的下拉選單還有按鈕式的下拉選單。我們先看一張圖觀察下，從圖中可以看出，普通下拉選單和按鈕式下拉選單的樣式基本相同，唯一比較明顯的區別是：普通下拉選單相
Excel多級下拉選單聯動自動匹配內容
4.一級下選單引用的是第一行的資料，我們對一級下拉選單進行定義。選中第一行的資料，點選選單欄中的【定義名稱】，在輸入區域名稱這裡輸入名稱，例如“首行”，然後點選確定。可以看到在名稱管理器裡多了一個名稱“首行”。
EXCEL如何實現多級聯動下拉選單
首先來說一下我們要實現的效果，就是我們選擇1級選單後，2級選單裡就有對應1級選單的內容，我們選擇2級選單的項的時候，3級選單會產生對應2級選單項的內容，以此類推，來說一下我實現這種功能的原理，就是為不同的列的內容設定了名稱，而這個名稱恰好就是上一級選單裡的選擇項。這樣的情況下，在資料有效性中的函式讀取的其實
bootstrap多級下拉選單
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多級下拉選單示例</
Bootstrap元件---下拉選單，多級選單 ,按鈕
下拉選單 選單： ,dropdown（.dropup改變這個是上顯示） data-toggle="dropdown" (啟用文字處) .dropdown-menu .pull-left .pull-right 按鈕組：.btn
Bootstrap 3的多級下拉選單示例
Bootstrap 雖好，但對於複雜的介面，還是有N多元件需要自己擴充套件，並且要往簡潔、大氣的Bootstrap介面上靠，著實要費一些功夫。下面分享一個Bootstrap 3的多級下拉選單，無需第三方Js指令碼，複製後直接可用。 <!DOCTYPE HTML>
bootstrap怎麼設定下拉選單不點選，改成滑鼠懸停直接顯示下拉選單
方法一： 實際上比較簡單，只需要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：.nav > li:hover .dropdown-menu {display: block;} 但是主導航失去連結的效
jQuery cxSelect 聯動下拉選單
外掛簡介 cxSelect 是基於 jQuery 的多級聯動選單外掛，適用於省市、商品分類等聯動選單。 列表資料通過 AJAX 獲取，也可以自定義，資料內容使用 JSON 格式。 同時相容 Zepto，方便在移動端使用。 國內省市縣資料來源：basecss/cityData 下載及演示 演示地址：htt
JS--jQuery實現的多級下拉選單效果程式碼
這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下： 這是一款jQuery多級下拉選單，在支援html5