2. 程式人生 > >詳解Bootstrap中JS外掛實現下拉選單效果

詳解Bootstrap中JS外掛實現下拉選單效果

阿新 • • 發佈：2019-02-03

在編寫網站過程中，導航條中下拉選單功能十分常見。那麼，今天就分享一下關於如何通過Bootstrap中JS外掛來實現下拉選單功能。

在官方文件中是這麼形容下拉選單外掛的


這裡寫圖片描述


翻譯過來就是：

通過此外掛您可以為幾乎所有東西新增下拉選單，包括導航條、標籤頁、膠囊式按鈕。



接下來，我們就按照官方文件所描述的那樣，為大家演示， 我們如何通過JS外掛為導航條、標籤頁以及膠囊式按鈕新增下拉選單。

用法部分：


一、通過data屬性：


向連結或按鈕新增 data-toggle=”dropdown” 來切換下拉選單。


程式碼如下： 

<!DOCTYPE html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css"
 
>
    <style>
        .dropdown{
            margin-top: 50px;
        }
        .dropdown-menu li{
            margin-left: 20px;
        }
    </style>
    <title>data屬性實現下拉選單</title>
</head>
<body>
<div class="container">
    <div class="dropdown">
        <!--通過data-toggle屬性來實現下拉選單-->
 

        <button class="btn btn-info" data-toggle="dropdown">
            下拉列表
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>下拉項1</li>]\
            jl;.'
                       <li>下拉項2</li>
            <li>下拉項3</li>
        </ul>

    </div>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下：


這裡寫圖片描述



二、通過 JavaScript呼叫下拉選單切換

程式碼如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
    <style>
        .dropdown{
            margin-top: 50px;
        }
        .dropdown-menu li{
            margin-left: 20px;
        }
    </style>
    <title>通過js呼叫下拉選單切換</title>
</head>
<body>
<div class="container">
    <div class="dropdown">
        <!--通過data-toggle屬性來實現下拉選單-->
        <button class="btn btn-info" data-toggle="dropdown">
            下拉列表
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-toggle">
            <li>下拉項1</li>
            <li>下拉項2</li>
            <li>下拉項3</li>
        </ul>

    </div>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
<script>
    /*通過文件就緒函式來顯示或隱藏下拉選單*/
    $(document).ready(function(){
        $(".dropdown-toggle").dropdown('toggle');
    });
</script>
</html>


效果如下：


這裡寫圖片描述


除了初始頁面下拉選單是顯示的，其餘和通過data屬性實現下拉選單的效果完全一樣！


值得注意的是：

這裡寫圖片描述


data-toggle=”dropdown”仍然需要
無論您是通過JavaScript呼叫下拉選單，還是使用資料api，
data-toggle=”dropdown”總是需要出現在下拉選單的觸發器元素上。

例項部分：


一、導航欄內實現下拉選單效果

程式碼如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
    <title>導航欄內下拉選單的用法</title>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <button class="btn btn-success">提交</button>
            </div>
            <div class="navbar-form navbar-left">
                <div class="dropdown nav navbar-nav">
                    <!--通過data-toggle屬性來實現下拉選單-->
                    <button class="btn btn-info" data-toggle="dropdown">
                        下拉列表
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>下拉項1</li>
                        <li>下拉項2</li>
                        <li>下拉項3</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下：


這裡寫圖片描述



二、標籤頁形式中實現下拉選單效果

程式碼如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
    <title>標籤形式實現下拉效果</title>
</head>
<body>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">標籤1</a></li>
        <li><a href="#">標籤2</a></li>
        <li><a href="#">標籤3</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
                標籤4<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">下拉項1</a></li>
                <li><a href="#">下拉項2</a></li>
                <li><a href="#">下拉項3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下：


這裡寫圖片描述



三、膠囊形式中實現下拉選單效果

程式碼如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/bootstrap-theme.css">
    <title>膠囊形式實現下拉選單效果</title>
</head>
<body>
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">標籤1</a></li>
        <li><a href="#">標籤2</a></li>
        <li><a href="#">標籤3</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
                標籤4<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">下拉項1</a></li>
                <li><a href="#">下拉項2</a></li>
                <li><a href="#">下拉項3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script src="../../jquery/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap.js"></script>
</html>


效果如下：


這裡寫圖片描述

以上，就是關於Bootstrap中JS外掛實現下拉選單效果的全部內容。


在呼叫.js檔案時需要注意，如果您想要單獨引用該外掛的功能，那麼您需要引用 dropdown.js。或者，正如 Bootstrap 外掛概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。


Programming is an art form.

相關推薦

詳解Bootstrap中JS外掛實現下拉選單效果

在編寫網站過程中，導航條中下拉選單功能十分常見。那麼，今天就分享一下關於如何通過Bootstrap中JS外掛來實現下拉選單功能。 在官方文件中是這麼形容下拉選單外掛的 翻譯過來就是： 通過此外掛您可以為幾乎所有東西新增下拉選單

bootstrap js外掛篇——下拉選單、滾動監測、選項卡

三、下拉選單 3.1基本結構 3.2 觸發方式  注：1、測試時發現js觸發的下拉選單點時只出現無法消失，建議data-toggle觸發         2、如果觸發下拉選單的元素是一個連結元素

詳解python中list的實現技術-分離式動態順序表！

這是python-list的官方實現方式，但其中關於分離式動態順序表的實現方式描述的不夠細緻，如果你有資料結構基礎的話可以直接去看這篇部落格，如果沒有的話不妨先看看這篇！ 什麼事順序表？ 將元素順序地存放在一塊連續的儲存區裡，元素間的順序關係由它們的儲存順序自然表示。

bootstrap-select外掛實現下拉框搜尋功能

工作上要用到在下拉框內實現搜尋功能，原生的select標籤是不能輸入的，所以最終找到了bootstrap-select外掛，功能十分強大，支援搜尋，多選，分組選中等。 本文摘取自： 官方文件 簡單示例 下面先附上我的程式碼，實現了搜尋功能，

template-web.js 結合dropload.min.js下拉外掛實現下拉重新整理和上拉載入

//引入js,所需要的js已經上傳到個人資源 <script type="text/javascript" src="/web/home/js/template-web.js"></script> <link href="/web/h

JS--jQuery實現的多級下拉選單效果程式碼

這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下： 這是一款jQuery多級下拉選單，在支援html5

boostrap外掛---typeahead.js---輸入提示下拉選單

首先需要載入，jquery，bootstrap.js，typeahead.js   <input id="typea" type="text" data-provide="typeahead" autocomplete="off">   a

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現 實現下拉選單需要用display，即改變display的block或none值。 先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

【JS外掛】下拉框通用三級聯動選擇 省市區三級聯動選擇

        省市區三級聯動選擇, 在我們開發中很常見, 下一級的下拉框資料與上一級的下拉框的值緊密相關, 所以需要我們處理的時候格外小心, 及時清理資料, 非同步載入資料時再去繫結值不容半點馬虎.        我今天給大家分享一個比較通用的Js外掛, 雖然叫JQuer

bootstrap實現下拉選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。      我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自

使用dropkick.js外掛實現省市區三級聯動效果

一、工作準備： 1、匯入jquery.js 2、匯入jquery.dropkick.js和dropkick.css（可以去官網下載最新的外掛） 3、匯入省市區的json資料（開發者自己json格式資料） 二、html程式碼部分： <select class="sele

在微信小程式中，如何實現下拉重新整理（模擬重新整理）

一、在app.json中啟動重新整理， 在Windows 中，        新增  "enablePullDownRefresh":"true" 二、在需要重新整理的頁面中寫（若是單個頁面），反之，可寫入app.js中： onPullDownRefre

easyUI在可編輯的datagrid中加入combogrid 實現下拉選擇填充列

在公司的專案中，有需要再新增資料的時候，通過下來選擇資料來完成資料的填充。 網上找了很多關於datagrid繫結 combogrid的方法，都不能很好的解決問題，於是自己根據easyUI的api完成了這個方法。 ID為OtherFees的table 是一個datagri

AngularJS中ng-options實現下拉列表的資料繫結

下拉列表的簡單使用 ng-option指令使用很簡單，只需要繫結兩個屬性： 一個是ng-model用於獲取選定的值； 另一個是ng-options用於確定下拉列表的元素陣列。 <select ng-model="engineer.currentActivit

用JS實現下拉選單的聯動

需求：用JS實現一個下拉選單，要求在選中“地區”選單中相應的地區時，自動在“國家”選單中 出現相應的國家。 <!DOCTYPE html> <html> <head&g

js實現下拉選單提交表單後停留在選中option

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html

Bootstrap使用Tab和dropdown實現導航下拉選單效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Drop

asp.net中js+jquery新增下拉框值和後臺獲取

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <script src="Scripts

js實現下拉選單

效果：平時在網頁上經常會看到導航欄在滑鼠經過時，字型顏色和背景會改變，然後會顯示下拉選單。 原理：js實現在滑鼠經過時，改變字型的顏色和背景，然後下拉選單顯示。一般情況下，下拉選單處於隱藏的狀態。

Jquery.sumoselect外掛實現下拉複選框

1、官方網站： https://hemantnegi.github.io/jquery.sumoselect/  說明介紹網址 https://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html   dem