JS:
复制代码
代码如下:
$(document).ready(function()
{
//语言头部的点击事件，显示语言列表
$(".language_selected").click(function(e)
{
$(".language_list").toggle()
e.stopPropagation()
//阻止事件冒泡，否则事件会冒泡到下面的文档点击事件
})
//点击文档时，隐藏语言列表
$(document).click(function()
{
$(".language_list").hide()
})
//点击语言列表中的语言项时，更新选中项，并隐藏语言列表
$(".language_list
li").click(function()
{
$(".language_selected").text($(this).text())
$(".language_list").hide()
})
$("#noPopEvent").click(function(e)
{
e.stopPropagation()
})
})
CSS:
复制代码
代码如下:
.language_selected
{
cursor:
pointer
}
.language_list
{
border:
1px
solid
black
display:
none
}
.language_list
li
{
cursor:
pointer
border:
1px
solid
red
}
HTML:
复制代码
代码如下:
<div
style="width:
200px">
<div
class="language_selected">
中文(简体)</div>
<div
class="language_list">
<ul>
<li>中文(简体)</li>
<li>English</li>
</ul>
</div>
</div>
<div
id="noPopEvent"
style="width:
100px
height:
100px
border:
1px
solid
black">
点击我，不隐藏语言列表,需要自己显示DIV
</div>
知道文本框都有blur事件吗？就是光标在闪的时候就处于焦点，当你点其他地方时，光标就没了，就会触发blur事件。你要做到当div显示时，让隐藏在div内的文本框处于焦点，点击其他地方时，文本框的焦点自然会消失，blur事件把当前div隐藏。!!注意: 当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点
可以用jquery 脚本框架，方便，浏览器的兼容性好
var 按钮=document...\x0d\x0avar div=document....\x0d\x0a\x0d\x0a//点击按钮弹出div 在点击按钮关闭该div \x0d\x0a按钮.onclick=function()\x0d\x0a{\x0d\x0aif(div.style.display=="none")\x0d\x0a{\x0d\x0adiv.style.display="block"\x0d\x0a}\x0d\x0aelse\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a//点击其他地方关闭div\x0d\x0adocument.onclick=function()\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a\x0d\x0a//为了防止点击div 也关闭div 所以这里要防止冒泡\x0d\x0adiv.onclick=function()\x0d\x0a{\x0d\x0areturn false\x0d\x0a}\x0d\x0a\x0d\x0a希望对你有所帮助
