章节
问答
笔记
评论
占位
占位

下拉菜单--JavaScript触发方法

和模态弹出窗一样,Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的,不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示:

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

使用JavaScript调用dropdown()方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。

$(function(){
    $(".dropdown-toggle").dropdown();
})

还可以使用参数“toggle”。当下拉菜单隐藏时,调用dropdown(“toggle”)方法可以显示下拉菜单,反之,如果下拉菜单显示时,调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

不过使用该参数,每次单击都要两次toggle,就会一直是一个不变的状态。所以,一般情况下,使用示例中不带参数的方法。就算你需要使用参数“toggle”,也建议使用jQuery的one方法:

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

任务

我来试试:用JavaScript的方法实现触发导航条的“下拉菜单”

1、删除右侧的a标签的data-toggle="dropdown"属性

2、在任务区写JavaScript代码以触发下接菜单的显示隐藏

不会怎么办?请查看任务提示区。

?不会了怎么办

参考代码如下:

<script>
$(function(){
    $(".dropdown-toggle").one("click",function(){
        $(this).dropdown("toggle");
    })
})
</script>
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?