单个点击显示再点击隐藏,多个点击显示当前,隐藏其他
HTML
<div class="matBox">
<ul>
<li class="inactive inforNav">
首页<i></i>
<div class="inforDiv" style="display: none;">
<p>111111111</p>
</div>
</li>
<li class="inactive inforNav">
信息报告<i></i>
<div class="inforDiv" style="display: none;">
<p>222222222222222222222</p>
</div>
</li>
<li class="inactive inforNav">
首页<i></i>
<div class="inforDiv" style="display: none;">
<p>3333333333</p>
</div>
</li>
<li class="inactive inforNav">
信息报告<i></i>
<div class="inforDiv" style="display: none;">
<p>444444444444444444</p>
</div>
</li>
</ul>
<li class="inactive inforNav">
首页<i></i>
<div class="inforDiv" style="display: none;">
<p>5555555555555555555</p>
</div>
</li>
<li class="inactive inforNav">
信息报告<i></i>
<div class="inforDiv" style="display: none;">
<p>666666666666666666666</p>
</div>
</li>
<li class="inactive inforNav">
首页<i></i>
<div class="inforDiv" style="display: none;">
<p>77777777777777777</p>
</div>
</li>
<li class="inactive inforNav">
信息报告<i></i>
<div class="inforDiv" style="display: none;">
<p>8888888888888888888</p>
</div>
</li>
</div>
</div>
CSS
.inforDiv{background:#f7f7f7;padding:0px 20px 20px 0px;display:none;}
.inforBox ul.inforDiv{border:none;}
.inforDiv li{overflow:hidden;padding:10px;border-bottom:1px dashed #ddd;}
.matBox ul{padding: 10px;}
.matBox li{ padding: 10px;height:auto;line-height: 40px;border-bottom: 1px solid #dedede;cursor: pointer;}
.matBox li div{background:#fff;border-top:1px dashed #dedede;padding: 20px;text-align: center;}
JS
$(document).ready(function() {
$('.inactive').click(function() {
if ($(this).children('div').css('display') == 'none') {
$(this).siblings('li').removeClass('inactives');
$(this).siblings('li').children('div').slideUp(100);
$(this).addClass('inactives');
$(this).children('div').slideDown(100);
} else if ($(this).children('div').css('display') == 'block') {
$(this).removeClass('inactives');
$(this).children('div').slideUp(100);
$(this).siblings('li').removeClass('inactives');
$(this).siblings('li').children('div').slideUp(100);
}
})
});