<script>
$(function(){
$(".d1").click(function(){
var txts = $(this).parents("li")
if ($(this).attr ('class')=='d1'){
$(this).removeClass('d1')
txts.find(".d2").show()
}else{
$(this).addClass('d1')
txts.find(".d2").hide()
}
})
})
</script>
<li>
<div class=d1>展开</div>
<div style=" display:none" class=d2>内容</div></li>
<li>
<div class=d1>展开</div>
<div style=" display:none" class=d2>内容2</div></li>
另外附上另外一种简单方法：
$(document).ready(function(){
$(".d1").click(function(){
$(".d2").toggle()
})
})
</script>
<li>
<div class=d1>展开</div>
<div style=" display:none" class=d2>内容</div></li>
<li>
<div class=d1>展开</div>
<div style=" display:none" class=d2>内容2</div></li>
<li>
方法很多，最直观的就是用js控制div的display值，例如：
var div = document.getElementById('divID')div.style.display = 'none' // div隐藏
div.style.display = 'block' // div显示
也可以写一段CSS，用CSS来控制div在视觉上隐藏，例如高度设为0、透明、溢出可视区等，还可以搭配CSS3的新属性来实现灵活多样的渐变动画效果，然后用JS来切换，例如：
.isHide {height:0 overflow:hidden opacity:0} div.classList.add('isHide') // div隐藏div.classList.remove('isHide') // div显示
还可以利用jQuery的hide()、show()、fadeIn、fadeOut、toggle等方法来实现类似效果。
$(document).on('click',function(event){判断event.target 来源dom对象，
如果是你指定的input或者select ,return false
$('xxx').hide()
})
