ul li 好友列表

<div class="col-md-4 mt">
<div class="friend-list">
<h4 class="title" id="fri-title"><i class="fa fa-angle-down" id="i-icon"></i>选择收件人</h4>
<ul class="list-group max-he" id="friend">
<!--<volist name="list" id="row">-->
<li class="list-group-item fri-group">
<a href="#" class="inactive">我的好友</a>
<ul style="display:none;" class="group-fri">
<!--<volist name="row['childList']" id="rowtwo">-->
<li><a href="javascript:void(0);" id="setvalue"><p class="conceal"><img src="http://placehold.it/30x30"/>123456789</p></a></li>
<li><a href="javascript:void(0);" id="setvalue"><img src="http://placehold.it/30x30"/>小明</a></li>
<!--</volist>-->
</ul>
</li>
<li class="list-group-item fri-group">
<a href="#" class="inactive">我的好友</a>
<ul style="display:none;" class="group-fri">
<!--<volist name="row['childList']" id="rowtwo">-->
<li><a href="javascript:void(0);" id="setvalue"><p class="conceal"><img src="http://placehold.it/30x30"/>电话</p></a></li>
<li><a href="javascript:void(0);" id="setvalue"><img src="http://placehold.it/30x30"/>小明</a></li>
<!--</volist>-->
</ul>
</li>
<!--</volist>-->
</ul>
</div>
</div>

/*好友列表样式*/
.friend-list {
text-align: left;
font-size: 12px;
color: black;
}
.friend-list .title {
padding: 15px;
background-color: #E6EAF2;
font-size: 15px;
}
.friend-list .title #i-icon {
margin-right: 10px;
}
.friend-list .title:hover {
cursor: pointer;
background-color: #D4EAF2;
}
.friend-list .max-he {
height: 400px;
overflow-y: auto;
}
.friend-list .fri-group {
padding:;
}
.friend-list .fri-group a {
display: block;
width: 100%;
line-height: 39px;
color: black;
padding-left: 15px;
}
.friend-list .fri-group > a:hover,
.friend-list .fri-group > a:focus {
background-color: #E1F4FF;
text-decoration: none;
}
.friend-list .fri-group .group-fri {
padding-left:;
}
.friend-list .fri-group .group-fri li a p.conceal {
margin-top:;
margin-bottom:;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.friend-list .fri-group .group-fri li a p img {
margin-right: 12px;
}
.friend-list .fri-group .group-fri li:hover {
background-color: #F4B877;
}

$(document).ready(function() {
$('.inactive').click(function(){
if($(this).siblings('ul').css('display')=='none'){
$(this).parent('li').siblings('li').removeClass('inactives');
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(200).children('li');
if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
$(this).parents('li').siblings('li').children('ul').slideUp(200);
}
}else{
//控制自身变成+号
$(this).removeClass('inactives');
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(200);
//控制自身子菜单变成+号
$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(200);
//控制同级菜单只保持一个是展开的（-号显示）
$(this).siblings('ul').children('li').children('a').removeClass('inactives');
}
});
});window.onload = function() {
var str = "";
document.getElementById('setvalue').onclick = function() {
str = document.getElementById('sign-name').value;
str += document.getElementById('setvalue').innerHTML + ",";
document.getElementById('sign-name').value = str;
}
}
$('#fri-title').click(function(){
$("#friend").slideToggle(500);
if($('#i-icon').is('.fa-angle-down')){
$('#i-icon').removeClass('fa-angle-down');
$('#i-icon').addClass('fa-angle-up');
}else{
$('#i-icon').removeClass('fa-angle-up');
$('#i-icon').addClass('fa-angle-down');
}
});
$("input:radio[name='sendMode']").click(function(){
var val = $("input:radio[name='sendMode']:checked").val();
switch(val)
{
case '1':
$('.email-div').slideToggle(500);
$('.sms-div').fadeOut('.1s');
$('.wechat-div').fadeOut('.1s');
break;
case '2':
$('.sms-div').slideToggle(500);
$('.email-div').fadeOut('.1s');
$('.wechat-div').fadeOut('.1s');
break;
case '3':
$('.wechat-div').slideToggle(500);
$('.email-div').fadeOut('.1s');
$('.sms-div').fadeOut('.1s');
break;
}
});