Twitter Bootstrap下拉列表在点击时关闭 [英] Twitter Bootstrap dropdown closes when clicked
问题描述
我想要从下拉菜单中发送消息。
我同时包含 bootstrap.js
, bootstrap.css
和 bootstrap-responsive.css
。
如何让这个下拉菜单不关闭?
< HEAD>
< script type ='text / javascript'> //<![CDATA [
$(window).load(function(){
$(' text(a))click(function(e){
e.stopPropagation();
});
});
function ShowDr(div){
$(#medr+ div).css(display,block);
$(#xdr+ div).focus();
}
//]]>
< / script>
< / head>
< body>
< ul class =nav>
< li class =dropdowndata-dropdown =dropdown>
< a href =javascript:void(0)class =dropdown-toggledata-toggle =dropdown>消息
< b class =caret>< / b>< / a>
< ul class =dropdown-menu dropdown-menu-large>
这是用户John到Ann的消息。如果安想发一个答案,她会点击链接。然后
,textarea将变得可见。
< a href =javascript:void(0)onclick =javascript:ShowDr('18')>< img src ='/ img / reply.gif'>回答< / A><峰; br />
< div id =medr18style =display:noneclass =medr>
< li>
< div style =padding:20px;>
< textarea name =xdr18id =xdr18class =textareasmall>< / textarea> < br />< input type = button value =Sendclass =btn btn-success btn-mediumonclick =GoM('2','Messages sent')/>
< / div>
< / li>
< / div>
< / ul>
< / li>
< / ul>
您需要正确选择textarea才能 stopPropagation()
方法工作。尝试这样:
JS
$('。dropdown-menu textarea')。click(function(e){
e.stopPropagation();
});
此外,您的textarea不能是 ul $ c的孩子$ c>元素,所以将它包含在
li
列表项中。
演示: http://jsfiddle.net/ENWFy/
I am not getting this to work. The dropdown is closing all the time.
I want to be able to send message from the dropdown menu.
I included both bootstrap.js
, bootstrap.css
and bootstrap-responsive.css
in the header.
How can I get this dropdown not to close ?
<head>
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
$('.dropdown-menu textarea a').click(function (e) {
e.stopPropagation();
});
});
function ShowDr(div) {
$("#medr" + div).css("display", "block");
$("#xdr" + div).focus();
}
//]]>
</script>
</head>
<body>
<ul class="nav">
<li class="dropdown" data-dropdown="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> Message
<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large">
This is a message from the user John to Ann. If Ann wants to send an answer she will click the link. Then
the textarea will become visible.
<a href="javascript:void(0)" onclick="javascript:ShowDr('18')"><img src='/img/reply.gif'> Answer</a><br/>
<div id="medr18" style="display:none" class="medr">
<li>
<div style="padding:20px;">
<textarea name="xdr18" id="xdr18" class="textareasmall"></textarea> <br /><input type=button value="Send" class="btn btn-success btn-medium" onclick="GoM('2','Message sent')" />
</div>
</li>
</div>
</ul>
</li>
</ul>
You need to properly select the textarea in order for the stopPropagation()
method to work. Try this:
JS
$('.dropdown-menu textarea').click(function(e) {
e.stopPropagation();
});
Also, your textarea cannot be a child of a ul
element, so include it inside a li
list item instead.
Demo: http://jsfiddle.net/ENWFy/
这篇关于Twitter Bootstrap下拉列表在点击时关闭的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!