记录一则玩Bootstrap的Dropdown时遇到问题的解决办法
嗯。。最近玩上了Bootstrap。。
个人比较喜欢dnspod右上角登录的那种效果,于是在自己的小项目中也想要实现它 囧rz
因为是用的Bootstrap,那么“下拉菜单”无疑就是Dropdown来做了
实现什么的就不多描述了
直接上我遇到的问题吧:
[code]
在这个“下拉菜单”中有一个登录表单需要填写
但是dropdown的默认效果是在这个“菜单”中有点击就会自动给关闭掉- -
[/code]
扒拉了半天手册,似乎没有看见有参数可以控制这个关闭的动作。。
发现已经有前辈提供了解决方案了。。好吧,那我这里就不客气了O(∩_∩)O~
首先,向页面js中添加以下内容
[code language="js"]
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function(e) {
e.stopPropagation();
});
[/code]
这么做的目的是咱定义了一个叫“data-stopPropagation”的属性,让它被点击的时候停止掉dropdown想自我了结的念头╮(╯▽╰)╭
嗯,事情到这里就好办了
我的表单需要点击,我的登录按钮需要点击
那么,我在这些标签里添加上刚刚定义的属性“data-stopPropagation”就可以了
eg:
[code language="html"]
<a href="javascript:void(0)" id="log-btn" data-stopPropagation="true" class="dropdown-toggle" data-toggle="dropdown">
登录
</a>
<ul class="dropdown-menu login-cpanel" data-stopPropagation="true">
<li>
<label for="login-email" data-stopPropagation="true">
Email:
</label>
<input type="text" name="email" id="login-email" data-stopPropagation="true" />
</li>
<li>
<label for="login-pwd" data-stopPropagation="true">
密码:
</label>
<input type="password" name="passowrd" id="login-pwd" data-stopPropagation="true" />
</li>
<li>
<label class="clearfix" data-stopPropagation="true">
<input type="checkbox" name="remember" value="1" data-stopPropagation="true" />
<em data-stopPropagation="true">
一个月内自动登录
</em>
</label>
</li>
<li class="divider"></li>
<li>
<a class="btn btn-primary" data-stopPropagation="true">
登录
</a>
</li>
</ul>
[/code]
今天的唠叨完毕,enjoy~~
正好用到 帮了大忙 非常感谢