ul li 好友列表

Posted 2020-08-04 上官靖宇

<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: 0;
}
.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: 0;
}
.friend-list .fri-group .group-fri li a p.conceal {
    margin-top: 0;
    margin-bottom: 0;
    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;
                    }
            });