新建分類菜單追加添加與重命名修改提交

點擊添加時,顯示文本框添加名稱,確認提交數據,取消隱藏文本框。點擊編輯顯示文本框輸出名稱,提交后修改完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="lxr-pzLeft">
                    <div class="lxr-tit">
                        聯系人分類
                        <a href="javascript:;" class="lxr-add">新建分類</a>
                    </div>

                    <div class="pz-addLine">
                        <input type="text" class="layui-input" id="fl_name" placeholder="新分類名稱"/>
                        <a href="javascript:;" class="pz-gb"></a>
                        <a href="javascript:;" class="pz-qr"></a>
                    </div>
                    <!--列表-->
                    <div class="pz-con">
                        <ul class="pzfl-list">
                            <li>
                                <span>服務對象服務對象服務對象</span>
                                <a href="javascript:;" class="fl-del" title="刪除"></a>
                                <a href="javascript:;" class="fl-xg" title="修改"></a>
                            </li>
                            <li>
                                <span>志愿者</span>
                                <a href="javascript:;" class="fl-del" title="刪除"></a>
                                <a href="javascript:;" class="fl-xg" title="修改"></a>
                            </li>
                        </ul>

                    </div>
                </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 //分類選擇
    $(".pzfl-list").on('click'," li",function () {
      $(this).addClass("on").siblings().removeClass("on");
    });

    //新建分類
    $(".lxr-add").click(function () {
      $(".pz-addLine").show();
      $(".pz-con").addClass("pz2");
    });
    $(".pz-gb").click(function () {
      $(this).parents(".pz-addLine").hide();
        $(this).siblings("input").val("");
    });

  //修改
  $(".pzfl-list").on('click','.fl-xg',function() {
      var fl = $(this).siblings("span").html();
      $(this).parents("li").addClass("cn");
      $(".pz-addLine").addClass("cn").show().find("input").val(fl);
      preventBubble();
  });


  $(".pz-addLine").on('click','.pz-qr',function(){
      var flname = $(this).siblings("input").val();

     if($(".pz-addLine").hasClass("cn")){
         $(".pzfl-list").find("li.cn").find("span").text(flname);
         $(".pz-addLine").removeClass("cn");
         $(".pzfl-list").find("li").removeClass("cn");
       $(".pz-addLine").hide().find("input").val("");
     }
     else {
         if(flname == "") {
             layer.tips('不能為空!', '#fl_name',{
                 tips: [4, '#4796fa']
             });
         }
         else {
             $(".pzfl-list").append("<li>" + "<span>" + flname + "</span>" + " <a href="javascript:;" class="fl-del" title="刪除"></a>\n" +
                 "                                <a href="javascript:;" class="fl-xg" title="修改"></a></li>");
             $(this).parents(".pz-addLine").hide();
             $(this).siblings("input").val("");
         }
     }
  });

未經允許不得轉載:小網站 » 新建分類菜單追加添加與重命名修改提交

贊 (0)

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
丧尸之战2丧尸来袭电影
吉利帝豪官网 斗牛游戏下载 双色球19104蓝号 325棋牌游戏下载 全天pk10计划 11选5前2直选技巧 北京pk10官网软件下载 2016江西时时开2015 澳门时时彩计划 北京pk10破解网址 12选5有没有稳赚发案 牛牛看牌四张抢庄 黑彩的计划是不是真的 足球即时比 88财网 赛车北京pk10记录