>网页特效 >导航菜单 >jQuery点击列表菜单选择添加联系人效果

jQuery点击列表菜单选择添加联系人效果

来源：https://www.sucaihuo.com/js/2594.html 2017-07-30 23:46浏览(1788) 收藏

一款jQuery点击列表菜单选择添加联系人的效果，点击左侧列表菜单里的任意内容，均会自动添加到右侧的列表队列里，左侧取消选择后右侧列表里面自动删除取消的内容，选择完毕后点击确定，则选择的内容自动存储在输入框里，整体的效果还时不错的，喜欢的童鞋请收下吧。
jQuery点击列表菜单选择添加联系人效果
分类：导航菜单 > 图标导航 难易：初级
查看演示 下载资源 下载积分： 30 积分

页面的head部分，需引入2个CSS样式文件和jQuery库，代码如下：

<link type="text/css" rel="stylesheet" href="css/common.css">
<link type="text/css" rel="stylesheet" href="css/select.css">
<script src="js/jquery.min.js"></script>

页面的body部分，一个form表单用来存储选择的列表内容，多个div容器用来显示弹窗的列表菜单，代码如下：

<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="tel" name="phone" id="area_btn_y2" onclick="show_lay(2)"  lay-verify="phone" autocomplete="off" class="layui-input">
            <em>查询人员2</em>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="tel" id="area_btn_y1" onclick="show_lay(1)" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
            <em>查询人员1</em>
        </div>
    </div>
</form>
<div class="fade_layer"></div>
<div class="detail_layer select_peo">
    <div class="title">选择人员</div>
    <div class="select_peo_con">
        <div class="left">
            <div class="areas_list">
                <ul class="yiji">
                    <li class="areas_list_one"><a>委领导</a> 
                        <dl>
                            <dd><a>领导二级</a>
                                <dl>
                                    <dd><a>领导三级</a></dd>
                                    <ul class="areas_list_two">
                                        <li><span id="99">张三3</span></li>
                                        <li><span id="100">梁四3</span></li>
                                        <li><span id="101">王王3</span></li>
                                        <li><span id="102">董73</span></li>
                                        <li><span id="103">陈四3</span></li>
                                        <li><span id="104">杨过3</span></li> 
                                    </ul>
                                    <dd><a>领导三级2</a>
                                        <dl>
                                            <dd><a>领导四级</a></dd>
                                            <ul class="areas_list_two">
                                                <li><span id="99">张淘32</span></li>
                                                <li><span id="100">梁齐超32</span></li>
                                                <li><span id="101">王得力32</span></li>
                                                <li><span id="102">董亚军32</span></li>
                                                <li><span id="103">陈贝斯32</span></li>
                                                <li><span id="104">杨过32</span></li> 
                                            </ul>
                                        </dl>
                                    </dd>

                                </dl>   
                            </dd>
                            <dd><a>委领导二级2</a>
                                <dl>
                                    <dd><a>领导三级</a>
                                        <dl>
                                            <dd><a>领导四级</a></dd>
                                            <ul class="areas_list_two">
                                                <li><span id="99">张三3</span></li>
                                                <li><span id="100">梁四3</span></li>
                                                <li><span id="101">王王3</span></li>
                                                <li><span id="102">董73</span></li>
                                                <li><span id="103">陈四3</span></li>
                                                <li><span id="104">杨过3</span></li> 
                                            </ul>
                                        </dl>
                                    </dd>
                                </dl>
                            </dd>
                            <dd><a>委领导二级3</a></dd>
                            <ul class="areas_list_two">
                                <li><span id="637">隋志</span></li>
                                <li><span id="730">杨过</span></li>
                                <li><span id="731">王泽涛</span></li>
                                <li><span id="103">陈广</span></li>
                                <li><span id="104">杨勇</span></li>
                                <li><span id="637">隋文</span></li>
                                <li><span id="730">杨治国</span></li>
                                <li><span id="731">王民</span></li>
                            </ul>
                        </dl>
                    </li>
                    <li class="areas_list_one"><a>本地领导</a></li>
                    <ul class="areas_list_two">
                        <li><span id="105">武华</span></li>
                        <li><span id="106">李文</span></li>
                        <li><span id="107">田俊</span></li>
                        <li><span id="108">陈菲</span></li>
                    </ul>
                    <li class="areas_list_one"><a>北京领导</a></li>
                    <ul class="areas_list_two">
                        <li><span id="109">田军</span></li>
                        <li><span id="110">侯涛</span></li>
                        <li><span id="111">李国</span></li>
                        <li><span id="112">王诺</span></li>
                        <li><span id="113">孙婷</span></li>
                        <li><span id="114">李安健</span></li>
                        <li><span id="115">王卢欣</span></li>
                        <li><span id="116">李曹静</span></li>
                        <li><span id="117">张吴剑</span></li>
                        <li><span id="118">陈佟庆</span></li>
                        <li><span id="119">李唐琪</span></li>
                    </ul>
                </ul>
            </div>
        </div>
        <div class="center">
            <a id="list_add"><img src="images/addicon.jpg"></a>
        </div>
        <div class="right">
            <ul class="send_to">
            </ul>
        </div>
        <div class="clear"></div>
        <div class="bot_btn">
            <a onclick="do_add(this)" class="a_con do_add">确定</a><a class="a_con close_btn">取消</a> 
        </div>
    </div>
</div>

页面的底部，设置好选择、取消等的事件响应，代码如下：

<script type="text/javascript">
//点击下拉人员效果
$('.detail_layer').find('.left .areas_list .areas_list_one > a').click(function(){
    if($(this).parent().hasClass('on')){
        $(this).parent().removeClass('on');
        $(this).parent().next('.areas_list_two').css('height','0');
        //隐藏下一级目录
        $(this).siblings('dl').hide();

        //初始化
        $(this).siblings('dl').find('dl').hide();
        $(this).siblings('dl').find('a').removeClass('on');
        //console.log($(this).siblings('dl').find('ul.areas_list_two').length);
        $(this).siblings('dl').find('ul.areas_list_two').css('height','0');
    }else {
        //解绑子级分类点击事件
        $(this).siblings('dl').children('dd').children('a').unbind('click');

        $(this).parent().addClass('on');
        //如果下面还有下一级
        if($(this).siblings('dl').length>0){
                //显示子类
                $(this).siblings('dl').show();
                //子级分类点击事件
                $(this).siblings('dl').children('dd').children('a').click(function(){
                    //解绑子级分类点击事件
                    $(this).siblings('dl').children('dd').children('a').unbind('click');
                    //切换隐藏
                    if($(this).hasClass('on')){
                        $(this).removeClass('on');
                        $(this).parent().next('.areas_list_two').css('height','0');
                        //隐藏下一级目录
                        $(this).siblings('dl').hide();
                    }else{

                        $(this).addClass('on');
                        $(this).parent().next('.areas_list_two').css('height','auto');
                        //如果还有下一级
                        if($(this).siblings('dl').length>0){
                            $(this).siblings('dl').show().css('padding-left','30px');
                            $(this).siblings('dl').children('dd').children('a').click(function(){
                                //解绑子级分类点击事件
                                $(this).siblings('dl').children('dd').children('a').unbind('click');
                                if($(this).hasClass('on')){
                                    $(this).removeClass('on');
                                    $(this).parent().next('.areas_list_two').css('height','0');
                                    //隐藏下一级目录
                                    $(this).siblings('dl').hide();
                                }else{
                                    $(this).addClass('on');
                                    $(this).parent().next('.areas_list_two').css('height','auto');
                                    //如果还有下一级
                                    if($(this).siblings('dl').length>0){
                                        $(this).siblings('dl').show().css('padding-left','30px');
                                        $(this).siblings('dl').children('dd').children('a').click(function(){
                                            console.log(1233);
                                            if($(this).hasClass('on')){
                                                $(this).removeClass('on');
                                                $(this).parent().next('.areas_list_two').css('height','0');
                                                //隐藏下一级目录
                                                $(this).siblings('dl').hide();
                                            }else{
                                                $(this).addClass('on');
                                                $(this).parent().next('.areas_list_two').css('height','auto');
                                            }
                                        });
                                    }else{
                                        //console.log($(this).parent().next('.areas_list_two').html());
                                        
                                        $(this).parent().next('.areas_list_two').css('height','auto');
                                    }
                                }
                            });
                        }else{
                            //console.log($(this).parent().next('.areas_list_two').html());
                            
                            $(this).parent().next('.areas_list_two').css('height','auto');
                        }
                    }
                    
                   
                    
                });
        }else{
            $(this).parent().next('.areas_list_two').css('height','auto');
        }
        
    }
    
});
//显示弹窗效果
function show_lay(id) {
    // alert(id);
    $('.detail_layer').show();
    $('.detail_layer').attr('id','y'+id);
    $('.fade_layer').fadeIn();
    
}
//插入元素
    $('.detail_layer').find('.areas_list_two li').click(function(){
        //对勾切换效果
        if(!$(this).find('span').hasClass('hover')){
            $(this).find('span').addClass('hover');
        }else{
            $(this).find('span').removeClass('hover');
        }
        //获取选中元素html
        var val_prev = $(this).find('span').attr('id');
        $message_peo = $(this).html();
        
        //获取添加后的数组
        var attrid =$(this).parents('.select_peo_con').find('.right ul.send_to li').map(function(){
            return $(this).find('span').attr('id');
        });
        //判断数字是否存在数组里
        if( jQuery.inArray(val_prev, attrid) ==-1){
            $(this).parents('.select_peo_con').find('.right ul.send_to').append("<li>"+$message_peo +"</li>");
        }else{
            // alert('已存在列表中');
            while ($(this).parents('.select_peo_con').find('.right ul.send_to').find("#" + val_prev).length > 0)  
            {  
               $(this).parents('.select_peo_con').find('.right ul.send_to').find("#" + val_prev).parent().remove();  
            }  
        }
    
    });

//选择人员插入当前点击的input里面
function do_add(elm){
        var id = $(elm).parents('div.detail_layer').attr('id');
        var temp='';
        var nruid='' ;
        var temp1='';
        var eid='' ;
        $(elm).parents('#'+id).find('ul.send_to li').each(function(i,e){
            text = $(e).find('span');
            for (var i = 0; i < text.length; i++) {
                var val=$(text[i]).html();
                if(val!=''){
                    temp+=val+',';
                }
                var id = $(text[i]).attr('id');
                if(id!=''){
                    nruid+=id+',' ;
                }
            };
        });

        var temps=temp.substring(0,temp.length-1);
        $('#area_btn_'+id).val(temps);
        $('#nruid_'+id).val(nruid) ;
        $('#eid').val(eid) ;
        $(elm).parents('.detail_layer').fadeOut();
        //清空选择人员
        $('.detail_layer .right ul li').remove();
        $(elm).parents('.select_peo_con').find('ul.areas_list_two').css('height','0');
        $(elm).parents('.select_peo_con').find('.areas_list_one').removeClass('on');
        $(elm).parents('.select_peo_con').find('.areas_list_two li span').removeClass('hover');
        $('.fade_layer').fadeOut();
};    
//取消按钮关闭事件
$('a.close_btn').click(function(){
    $(this).parents('.detail_layer').fadeOut();
        //清空选择人员
        $('.detail_layer .right ul li').remove();
        $(this).parents('.select_peo_con').find('ul.areas_list_two').css('height','0');
        $(this).parents('.select_peo_con').find('.areas_list_one').removeClass('on');
        $(this).parents('.select_peo_con').find('.areas_list_two li span').removeClass('hover');
        $('.fade_layer').fadeOut();
});
</script>
标签： 对话框二级菜单多级菜单图标导航弹窗展开收缩树形菜单菜单选择
可选日期范围的jQuery时间日期插件
可拖动的个人信息卡片
评论（0）
头像

系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2
更多 > 相关特效 /Relative
11-30 js仿360开机小助手右下角弹窗特效
10-14 jQuery轻量级手风琴折叠面板二级菜单插件
09-05 jQuery树形目录结构菜单组件
09-02 jQuery多功能多级侧边导航菜单插件
08-07 css3鼠标悬停图标组合动画特效
08-01 jQuery手机移动端常用弹窗对话框插件
07-24 jQuery炫酷动画弹窗插件hsycmsAlert.js
07-20 jQuery轻量级网页消息弹窗插件
07-04 html5轻量级网页弹出窗口管理插件WinBox
03-17 jQuery手机移动端弹窗提示插件
02-05 jQuery仿百度商桥弹窗留言框特效
01-23 js自定义手风琴菜单插件AccdionMenu
01-16 简单实用的coco-modal网页弹框插件
04-14 jQuery点击弹窗多步骤导入数据表单代码
04-09 jQuery网站后台左侧边栏四级导航菜单代码
03-15 jQuery递归无限级树状菜单展开收缩代码
01-18 leg_tree2.1树型菜单选择插件
01-06 div+css背景滚动和图标菜单布局代码
01-06 jQuery+Swiper移动端遮罩弹出菜单选择代码
01-03 css3蜂窝状快捷图标导航菜单特效
更多 > 推荐特效 /Recommed
01-04 jQuery左侧多级展开收缩导航菜单特效
09-01 jQuery基于swiper图文滚动轮播组合特效
08-14 小巧迷你型网页音乐播放器插件QPlayer
08-10 jQuery仿淘宝评论区图片放大展示特效
08-04 jQuery+swiper响应式横向时间轴特效
07-23 js中文打字练习工具代码
07-14 jQuery+swiper响应式新闻卡片滑块切换特效
06-28 js+html5益智闯关小游戏代码
06-03 html5 canvas涂鸦和在线签名插件jq-signature
05-07 Thinkphp5英文网址文字水印并解决水印BUG
04-25 jQuery+moment.js日期时间选择器代码
04-16 PHP淘宝助手csv数据生成导出已解决中文乱码
04-16 简单的js中文汉字转拼音代码
04-14 jQuery+css3鼠标悬停粒子聚合滑动导航菜单动画特效
更多 > 标签云 /Tag
放大轮播滑动缩略图旋转焦点图幻灯片瀑布流统计图抽奖上传分页日期时间轴加载动画bootstrap转盘页面表单切换相册响应式购物车导航滚动qq图表全屏验证拖动垂直弹出层放大镜3d悬浮菜单提示下拉select鼠标柱状图手风琴二级菜单广告rotate下拉框美化Slide画廊图片遮罩层upload导航菜单下拉菜单菜单导航
更多 > 最新特效 /New
04-28 PHP判断网盘链接是否失效
02-10 jQuery全屏手风琴四季场景变换动画特效
02-09 jQuery手机移动端购物车清单结算特效
02-08 html5网页视频打水印特效
02-07 jQuery+Touch.js手机移动端相册贴纸拖拽移动特效
01-28 jQuery+css3万圣节蜘蛛网动画背景特效
01-27 jQuery消息盒子插件NZ-MsgBox
01-26 jQuery手机移动端省市区城市地区三级联动选择插件
01-25 jQuery轮播图自动轮播切换特效
01-24 echarts带背景的折线图代码
01-22 highchart两个饼图联动特效
01-21 js+css3文件夹文档选择器特效
01-20 简单实用的jQuery图片连续裁剪插件
01-19 chrome内置的离线恐龙小游戏js代码