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>

初始效果（还没有禁用的时候）：

Bootstrap入门（二十四）data属性

想要禁用这个下拉菜单，添加代码

        <script>

            $(document).off(".data-api");

        </script>

现在点击，是没有任何效果的。

当然，有时候我们是希望只禁用部分指定的，比如这里修改为只禁用这个下拉菜单

可以修改代码为

        <script>

            $(document).off(".dropdown.data-api");

        </script>

效果同样是点击按钮无法触发下拉菜单。

秒客网

Bootstrap入门（二十四）data属性

相关文章