bootstrap

解决Dropdown菜单中登录表单因默认行为导致的自动关闭问题,通过添加自定义属性及JavaScript监听阻止事件冒泡。

直接上我遇到的问题吧:

在这个“下拉菜单”中有一个登录表单需要填写但是dropdown的默认效果是在这个“菜单”中有点击就会自动给关闭掉--

扒拉了半天手册,似乎没有看见有参数可以控制这个关闭的动作。。
发现已经有前辈提供了解决方案了。。好吧,那我这里就不客气了O(∩_∩)O~
首先,向页面js中添加以下内容

$("ul.dropdown-menu").on("click","[data-stopPropagation]",function(e){
    e.stopPropagation();});

这么做的目的是咱定义了一个叫“data-stopPropagation”的属性,让它被点击的时候停止掉dropdown想自我了结的念头╮(╯▽╰)╭

嗯,事情到这里就好办了
我的表单需要点击,我的登录按钮需要点击
那么,我在这些标签里添加上刚刚定义的属性“data-stopPropagation”就可以了
eg:

<ahref="http://www.skidu.me/"javascript:void(0)" id="log-btn" data-stopPropagation="true" class="dropdown-toggle" data-toggle="dropdown">
    登录
</a><ulclass="dropdown-menu login-cpanel"data-stopPropagation="true"><li><labelfor="login-email"data-stopPropagation="true">
            Email:
        </label><inputtype="text"name="email"id="login-email"data-stopPropagation="true"/></li><li><labelfor="login-pwd"data-stopPropagation="true">
            密码:
        </label><inputtype="password"name="passowrd"id="login-pwd"data-stopPropagation="true"/></li><li><labelclass="clearfix"data-stopPropagation="true"><inputtype="checkbox"name="remember"value="1"data-stopPropagation="true"/><emdata-stopPropagation="true">
            一个月内自动登录
        </em></label></li><liclass="divider"></li><li><aclass="btn btn-primary"data-stopPropagation="true">
            登录
        </a></li></ul>

今天的唠叨完毕,enjoy~~

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值