Bootstrap入門（二十四）data屬性

Bootstrap入門（二十四）data屬性

你可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是你的首選方式。

話又說回來，在某些情況下可能需要將此功能關閉。因此，我們還提供了關閉 data 屬性 API 的方法，即解除以 data-api 為命名空間並綁定在文檔上的事件。

首先，我們引入CSS文件和JS文件

　　　　 <link href="bootstrap.min.css" rel="stylesheet">

        <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
        <script src="bootstrap.min.js" type="text/javascript"></script>

通過data屬性禁用

我們先新建一個按鈕觸發的下拉菜單

        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                js通過class禁用下拉菜單
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">hello</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">hello</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">hello</a></li>
            </ul>
        </div>

初始效果（還沒有禁用的時候）：

想要禁用這個下拉菜單，添加代碼

        <script>
            $(document).off(".data-api");
        </script>

現在點擊，是沒有任何效果的。

當然，有時候我們是希望只禁用部分指定的，比如這里修改為只禁用這個下拉菜單

可以修改代碼為

        <script>
            $(document).off(".dropdown.data-api");
        </script>

效果同樣是點擊按鈕無法觸發下拉菜單。