站内搜索：
首页 >> 前端 >> 内容
移动端电子书章节目录三层结构增删

时间：2016/10/27 9:38:22

HTML

<!doctype html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>  
<title>目录</title>  
<link rel="stylesheet" type="text/css" href="../css/jquery-ui/jquery-ui.css">  
  <script src="../js/jquery-1.12.4.js"></script>  
  <script src="../css/jquery-ui/jquery-ui.js"></script>  
<link rel="stylesheet" type="text/css" href="../css/main.css">  
<link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureContentsEdit2.css">  
</head>  
<body>  
<!-- 头部样式 -->  
<p class="Top">   
<a href="wxPictureCutpicAdd.html" class="BtnBack"></a>  
<a href="EditRemove.html" class="BtnPublish" ><p class="EditOrd">发布</p></a>  
<a href="avascript:void(0)" class="BtnSee" ><p class="EditOrd">预览</p></a>  
  <h1>目录</h1>  
</p>  
<p class="WxBookContent">  
 <!--  <p class="FormItemEdit">  
     <input type="text" class="TextBox" placeholder="红瓦绿树，碧海蓝天" id="text">  
     <a href="javascript：void(0)" class="BtnClear" onclick="javascript：document.getElementById('text').value=''"></a>  
   </p> -->  
<p class="InputTips">  
  <p>说明: 拖动可排序, 点击可编辑</p>  
  </p>  
</p>  
  
<p class="WxBookContentEdit" id="OuterWrap">  
  
  <a href="javascript：void(0)">  
  <p class="FormItemListEdit">  
      <p class="EditContent">书名及封面</p>  
      <a href="javascript：void(0)" class="RightContent">已设置</a>  
    </p>  
  </a>  
  <a href="javascript：void(0)">  
  <p class="FormItemListEdit">  
      <p class="EditContent">内容简介</p>  
      <a href="javascript：void(0)" class="RightContentNumCenter">0字</a>  
    </p></a>  
  <a href="javascript：void(0)">  
  <p class="FormItemListEdit">  
      <p class="EditContent">概览</p>  
      <a href="javascript：void(0)" class="RightContentNumCenter">0字</a>  
    </p></a>  
  
  
     
   <p class="FormItemListEdit" id="FormItemListEditCollapse">  
   <a href="javascript：void(0)">  
    <p class="EditContent">  
    <a href="javascript：void(0)" class="EditContentImg"></a>准备工作  
    </p></a>  
    <a href="javascript：void(0)" class="RightContentImg"></a>  
    <p class="RightContentImgAdd">  
    <p class="Entry">  
  <p class="EntryTrangle"></p>  
  <a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>  
  <a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>  
  <a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a>  
</p>   
   </p>   
    <a href="javascript：void(0)" class="RightContentNum">0字</a>  
  </p>   
   
   <p class="FormItemListEdit2">  
    <p class="EditContent">安排行程规划</p>  
    <a href="javascript：void(0)" class="RightContentImg"></a>  
    <a href="javascript：void(0)" class="RightContentNum">0字</a>  
  </p>  
  
<p class="FormItemListEdit2">  
    <p class="EditContent">  
    购机票、定酒店</p>  
    <a href="javascript：void(0)" class="RightContentImg"></a>  
    <a href="javascript：void(0)" class="RightContentNum">0字</a>  
  </p>   
  
  <p class="FormItemListEdit" id="FormItemListEditCollapse">  
   <a href="javascript：void(0)">  
    <p class="EditContent">  
    <a href="javascript：void(0)" class="EditContentImg"></a>出发啦  
    </p></a>  
    <a href="javascript：void(0)" class="RightContentImg"></a>  
    <p class="RightContentImgAdd">  
    <p class="Entry">  
  <p class="EntryTrangle"></p>  
  <a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>  
  <a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>  
  <a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a>  
</p>   
   </p>   
    <a href="javascript：void(0)" class="RightContentNum">0字</a>  
  </p>   
  
  
  <a href="javascript：void(0)">  
  <p class="FormItemListEdit">  
      <p class="EditContent">再见，青岛</p>  
      <a href="javascript：void(0)" class="RightContentImg"></a>  
      <p class="RightContentImgAdd">  
  <p class="Entry">  
    <p class="EntryTrangle"><!--本Div只来实现三角形，无其他作用--></p>  
    <a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>  
    <a href="javascript：void(0)"><p>添加节</p></a>  
    <a href="javascript：void(0)"><p>删除</p></a>  
</p>  
  </p>   
      <a href="javascript：void(0)" class="RightContentNum">0字</a>  
      </p></a>  
      
  
</p>  
<script type="text/javascript">  
  
  
  
    
     
   
  
  
  
  
 $(function(){   
  
     $(".RightContentImg").parent().siblings("p").not(".RightContentImgAdd").css("display","block");  
     $(".AddChapter").click(function () {  
        var p = '<p class="FormItemListEdit" id="FormItemListEditCollapse">'+  
   '<a href="javascript：void(0)"><p class="EditContent">'+  
    '<a href="javascript：void(0)" class="EditContentImg"></a>准备工作</p></a>'+  
    '<a href="javascript：void(0)" class="RightContentImg"></a>'+  
    '<p class="RightContentImgAdd"><p class="Entry"><p class="EntryTrangle"></p>'+  
  '<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>'+  
  '<a class="AddSection" href="javascript：void(0)"><p>添加节</p></a>'+  
  '<a class="DeleteColumn"href="javascript：void(0)"><p>删除</p></a></p></p>'+  
    '<a href="javascript：void(0)" class="RightContentNum">0字</a></p>';  
        $("#FormItemListEditCollapse").parent().append(p);  
    });  
  
          $(".AddSection").click(function () {  
        var p = '<p class="FormItemListEdit3">'+  
      '<p class="EditContent">安排行程规划</p>'+  
      '<a href="javascript：void(0)" class="RightContentImg"></a>'+  
      '<p class="RightContentImgAdd">'+  
    '<p class="Entry">'+  
    '<p class="EntryTrangle"></p>'+  
    '<a class="AddChapter"href="javascript：void(0)"><p>添加章</p></a>'+  
    '<a href="javascript：void(0)"><p>添加节</p></a>'+  
    '<a href="javascript：void(0)"><p>删除</p></a></p></p>'+  
    '<a href="javascript：void(0)" class="RightContentNum">0字</a></p>'+  
    '<p class="FormItemListEdit3"><p class="EditContent">购机票、定酒店</p>'+  
      '<a href="javascript：void(0)" class="RightContentImg"></a>'+  
      '<a href="javascript：void(0)" class="RightContentNum">0字</a></p>';  
        $(this).parent().parent().parent().append(p);  
    });  
  
 /*colapese*/  
  
     $(".EditContentImg").click(function(){  
    if($(this).parent().siblings("p").not(".RightContentImgAdd").css("display")=="none"){  
      $(this).parent().siblings("p").not(".RightContentImgAdd").show();  
    }else{  
      $(this).parent().siblings("p").not(".RightContentImgAdd").hide();  
    }  
  })   
     $(".RightContentImg").click(function(){  
    if($(this).siblings("p").not(".FormItemListEdit3").css("display")=="none"){  
      $(this).siblings("p").not(".FormItemListEdit3").show();  
    }else{  
      $(this).siblings("p").not(".FormItemListEdit3").hide();  
    }  
  })   
  /*移除元素*/  
  $(".DeleteColumn").click(function(){  
    $(this).parents(".FormItemListEdit").remove();      
    /*排序功能*/   
  })  
})  
  
/*function $(id) {  
  return document.getElementById(id);  
}  
*/  
//获取鼠标位置  
/*function getMousePos (e) {  
  return{  
    x:e.pageX || e.clientX +document.body.scrollLeft,  
    y:e.pageY || e.clientY +document.body.scrollTop  
  }  
}  
*/  
//获取元素的位置  
/*function getElementPos(el){   
return {   
x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,   
y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop   
}   
} */  
  
//获取元素尺寸   
/*function getElementSize(el){   
return {   
width : el.offsetWidth,   
height : el.offsetHeight   
}   
}   
*/  
//禁止选择   
/*document.onselectstart = function(){   
return false;   
} */  
  
//判断是否有挪动   
/*var MOVE = {};   
MOVE.isMove = false;  
  
//创建的标杆（标志移动位置）   
var p = document.createElement('p');   
p.style.width = '400px';   
p.style.height = '1px';   
p.style.fontSize = '0';   
p.style.background = 'red';  
*/  
/*touchstart touchmove  touchend*/  
//获取列表顺序  
/*var OuterWrap=$("OuterWrap");  
OuterWrap.ontouchstart=function(event) {  
  var lis=OuterWrap.getElementsByClassName("FormItemListEdit");  
  for(var i=0;i<lis.length;i++){  
    lis[i]['pos'] = getElementPos(lis[i]);   
    lis[i]['size'] = getElementSize(lis[i]);  
  }  
}  
  
event = event || window.event;   
var t = event.target || event.srcElement;    
if(t.tagName.toLowerCase() == 'a'){   
var p = getMousePos(event);   
var el = t.cloneNode(true);   
el.style.position = 'absolute';   
el.style.left = t.pos.x + 'px';   
el.style.top = t.pos.y + 'px';   
el.style.width = t.size.width + 'px';   
el.style.height = t.size.height + 'px';   
document.body.appendChild(el);  
document.touchmove = function(event){   
event = event || window.event;   
var current = getMousePos(event);   
el.style.left =t.pos.x + current.x - p.x + 'px';   
el.style.top =t.pos.y + current.y - p.y+ 'px';   
document.body.style.cursor = 'move';  
}}  
*/  
//判断插入点   
/*for(var i = 0; i < lis.length; i++){   
if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){   
if(t != lis[i]){   
MOVE.isMove = true;   
OuterWrap.insertBefore(p,lis[i]);   
}  
  
}else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){   
if(t != lis[i]){   
MOVE.isMove = true;   
OuterWrap.insertBefore(p,lis[i].nextSibling);   
}   
} */  
  
//移除事件   
/*document.touchend = function(event){   
event = event || window.event;   
document.onmousemove = null;   
if(MOVE.isMove){   
OuterWrap.replaceChild(t,p);   
MOVE.isMove = false;   
}   
document.body.removeChild(el);   
el = null;   
document.body.style.cursor = 'normal';   
document.touchend = null;   
}   
} */  
  
  
  
  </script>  
</body>  
</html>

CSS

body{  
    margin:0px auto;  
    background:#efeff4;  
    position:relative;  
    display:block;  
    padding:44px 0px 64px 0px;  
}  
  
/* 头部样式 */  
.Top .BtnPublish{  
    height:44px;  
    float:right;  
    padding-right:10px;  
    font-size:16px;  
    color:#228924;  
    line-height:44px;  
}  
.Top .BtnSee{  
    height:44px;  
    float:right;  
    padding-right:20px;  
    font-size:16px;  
    color:#d6d6d7;  
    line-height:44px;  
}  
  
/* 目录书名 */  
.WxBookContent{  
    padding-top: 16px;  
  
}  
.WxBookContent .FormItemEdit {  
    background: #ffffff;  
    padding: 0px 26px;  
    margin-bottom: 10px;  
    position: relative;  
}  
 .WxBookContent .FormItemEdit:before {  
    content: " ";  
    position: absolute;  
    left: 0px;  
    top: 0px;  
    right: 0px;  
    border-top: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 0;  
    transform-origin: 0 0;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}  
.WxBookContent .FormItemEdit:after {  
    content: " ";  
    position: absolute;  
    left: 0px;  
    bottom: 0px;  
    right: 0px;  
    border-bottom: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}   
.WxBookContent .InputTips {  
    font-size: 14px;  
    line-height: 1.7;  
    color: #888888;  
    padding: 0px 16px;  
    margin-bottom: 10px;  
    text-align: center;  
}  
 .WxBookContent .FormItemEdit .TextBox {  
    height: 24px;  
    width: 100%;  
    border: 0px;  
    border-radius: 0px;  
    line-height: 24px;  
    padding: 10px 0px;  
    font-size: 16px;  
    font-weight: normal;  
}   
.WxBookContent .FormItemEdit .BtnClear {  
    width: 44px;  
    height: 44px;  
    background: url(../images/Mobile_bg0215.png) center center no-repeat;  
    background-size: 16px 16px;  
    position: absolute;  
    right: 0px;  
    top: 0px;  
}  
/* 编辑内容 */  
  
.WxBookContentEdit{  
    padding-top: 0px;  
}  
  
.WxBookContentEdit .FormItemListEdit {  
    background: #ffffff;  
    padding: 0px 26px;  
    position: relative;   
  
}  
  
.WxBookContentEdit .FormItemListEdit:after {  
    content: " ";  
    position: absolute;  
    left: 15px;  
    bottom: 0px;  
    right: 0px;  
    border-bottom: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}   
  
/* p设置真实高度，由此才会撑起来 */  
 .WxBookContentEdit .FormItemListEdit .EditContent {  
 height: 24px;  
 line-height: 24px;  
width: 100%;  
border: 0px;  
border-radius: 0px;  
padding: 10px 0px;  
font-size: 16px;  
font-weight: normal;  
color:#333333;  
}   
  
.EditContent .EditContentImg{  
    width: 10px;  
    height: 10px;  
    background: url(../images/Mobile_bg0298.png) center center no-repeat;  
    background-size: 10px 10px;  
    position: absolute;  
    left: 10px;  
    top: 17px;  
}  
/* 右边的图标是绝对定位 */  
.WxBookContentEdit .FormItemListEdit .RightContent {  
    line-height: 44px;  
    position: absolute;  
    right: 15px;  
    top: 0px;  
    font-size: 14px;  
    color:#a1a1a1;   
}  
  
.WxBookContentEdit .FormItemListEdit .RightContentNumCenter {  
    /* line-height: 54px; */  
    position: absolute;  
    right: 15px;  
    top: 14px;  
    font-size: 12px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit .RightContentNum {  
    /* line-height: 54px; */  
    position: absolute;  
    right: 15px;  
    top: 20px;  
    font-size: 12px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit .RightContentImg {  
    width: 10px;  
    height: 5px;  
    background: url(../images/Mobile_bg0297.png) center center no-repeat;  
    background-size: 10px 5px;  
    position: absolute;  
    right: 15px;  
    top: 10px;   
}  
  
  
/* 按钮触发事件1 */  
  
.WxBookContentEdit .FormItemListEdit2 {  
    background: #ffffff;  
    padding: 0px 0px;  
    position: relative;  
    display: none;     
}  
  
.WxBookContentEdit .FormItemListEdit2:after {  
    content: " ";  
    position: absolute;  
    left: 0px;  
    bottom: 0px;  
    right: 0px;  
    border-bottom: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}   
  
 .WxBookContentEdit .FormItemListEdit2 .EditContent {  
    height: 24px;  
    line-height: 24px;  
    width: 100%;  
    border: 0px;  
    border-radius: 0px;  
    padding-top: 10px;  
    padding-left:-40px;  
    font-size: 16px;  
    font-weight: normal;  
    color:#333333;   
}   
  
.WxBookContentEdit .FormItemListEdit2 .RightContent {  
    line-height: 44px;  
    position: absolute;  
    right: 0px;  
    top: 0px;  
    font-size: 14px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentNum {  
    position: absolute;  
    right: -10px;  
    top: 20px;  
    font-size: 12px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentImg {  
    width: 10px;  
    height: 10px;  
    background: url(../images/Mobile_bg0297.png) center center no-repeat;  
    background-size: 10px 5px;  
    position: absolute;  
    right: -10px;  
    top: 10px;   
}  
  
/*  */  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;   
    color: #ffffff;  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry{  
    width:85px;  
    background-color:#49484b;  
    margin-top: 4px;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .EntryTrangle{  
    position: absolute;  
    right:9px;  
    top: -3px;  
    width: 0px;  
    height: 0px;  
    border-right: 7px solid transparent;  
    border-left: 7px solid transparent;  
    border-bottom: 7px solid #49484b;  
   
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry p{  
    font-size: 16px;  
    padding-top:15px;  
    padding-bottom:15px;  
    padding-left:15px;   
    color: #ffffff;  
  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit{  
    padding: 5px 10px;  
    display: block;  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit p{  
    position: absolute;  
    left: 11px;  
    top: 0px;  
    font-size: 16px;  
    z-index: 6;  
    display: none;   
    color: red;  
  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;  
  
}  
  
/* 按钮触发事件2 */  
  
.WxBookContentEdit .FormItemListEdit2 {  
    background: #ffffff;  
    padding: 6px 41px;  
    position: relative;  
    display: none;     
}  
  
.WxBookContentEdit .FormItemListEdit2:after {  
    content: " ";  
    position: absolute;  
    left: 0px;  
    bottom: 0px;  
    right: 0px;  
    border-bottom: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}   
  
 .WxBookContentEdit .FormItemListEdit2 .EditContent {  
    height: 24px;  
    line-height: 24px;  
    width: 100%;  
    border: 0px;  
    border-radius: 0px;  
    padding-top: 10px;  
    padding-left:-40px;  
    font-size: 16px;  
    font-weight: normal;  
    color:#333333;   
}   
  
.WxBookContentEdit .FormItemListEdit2 .RightContent {  
    line-height: 44px;  
    position: absolute;  
    right: 0px;  
    top: 0px;  
    font-size: 14px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentNum {  
    position: absolute;  
    right: 16px;  
    top: 20px;  
    font-size: 12px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentImg {  
    width: 10px;  
    height: 10px;  
    background: url(../images/Mobile_bg0297.png) center center no-repeat;  
    background-size: 10px 5px;  
    position: absolute;  
    right: 16px;  
    top: 10px;   
}  
  
/*  */  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;   
    color: #ffffff;  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry{  
    width:85px;  
    background-color:#49484b;  
    margin-top: 4px;   
}  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .EntryTrangle{  
    position: absolute;  
    right:9px;  
    top: -3px;  
    width: 0px;  
    height: 0px;  
    border-right: 7px solid transparent;  
    border-left: 7px solid transparent;  
    border-bottom: 7px solid #49484b;  
   
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .Entry p{  
    font-size: 16px;  
    padding-top:15px;  
    padding-bottom:15px;  
    padding-left:15px;   
    color: #ffffff;  
  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit{  
    padding: 5px 10px;  
    display: block;  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd .RightContentImgAddEdit p{  
    position: absolute;  
    left: 11px;  
    top: 0px;  
    font-size: 16px;  
    z-index: 6;  
    display: none;   
    color: red;  
  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;  
  
}  
  
/* 按钮触发事件3 */  
  
.WxBookContentEdit .FormItemListEdit3 {  
    background: #ffffff;  
    padding: 0px 19px;  
    position: relative;  
    display: none;     
}  
  
.WxBookContentEdit .FormItemListEdit3:after {  
    content: " ";  
    position: absolute;  
    left: 0px;  
    bottom: 0px;  
    right: 0px;  
    border-bottom: 1px solid #d9d9d9;  
    color: #d9d9d9;  
    -webkit-transform-origin: 0 100%;  
    transform-origin: 0 100%;  
    -webkit-transform: scaleY(0.5);  
    transform: scaleY(0.5);  
    z-index: 5;  
}   
  
 .WxBookContentEdit .FormItemListEdit3 .EditContent {  
    height: 24px;  
    line-height: 24px;  
    width: 100%;  
    border: 0px;  
    border-radius: 0px;  
    padding-top: 10px;  
    padding-left:-40px;  
    font-size: 16px;  
    font-weight: normal;  
    color:#333333;   
}   
  
.WxBookContentEdit .FormItemListEdit3 .RightContent {  
    line-height: 44px;  
    position: absolute;  
    right: 0px;  
    top: 0px;  
    font-size: 14px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit3 .RightContentNum {  
    position: absolute;  
    right: -10px;  
    top: 20px;  
    font-size: 12px;  
    color:#a1a1a1;   
}  
.WxBookContentEdit .FormItemListEdit3 .RightContentImg {  
    width: 10px;  
    height: 10px;  
    background: url(../images/Mobile_bg0297.png) center center no-repeat;  
    background-size: 10px 5px;  
    position: absolute;  
    right: -10px;  
    top: 10px;   
}  
  
  
  
/* 添加章、节、删除 */  
  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;   
    color: #ffffff;  
}  
  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .Entry{  
    width:85px;  
    background-color:#49484b;  
    margin-top: 4px;   
}  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .EntryTrangle{  
    position: absolute;  
    right:9px;  
    top: -3px;  
    width: 0px;  
    height: 0px;  
    border-right: 7px solid transparent;  
    border-left: 7px solid transparent;  
    border-bottom: 7px solid #49484b;  
   
}  
  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .Entry p{  
    font-size: 16px;  
    padding-top:15px;  
    padding-bottom:15px;  
    padding-left:15px;   
    color: #ffffff;  
  
}  
  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .RightContentImgAddEdit{  
    padding: 5px 10px;  
    display: block;  
}  
  
.WxBookContentEdit .FormItemListEdit .RightContentImgAdd .RightContentImgAddEdit p{  
    position: absolute;  
    left: 11px;  
    top: 0px;  
    font-size: 16px;  
    z-index: 6;  
    display: none;   
    color: red;  
  
}  
  
.WxBookContentEdit .FormItemListEdit2 .RightContentImgAdd{  
    position: absolute;  
    right: 5px;  
    top: 20px;  
    z-index: 6;  
    display: none;  
  
}

  • 上一篇：jqueryeasyui1.5最新版本简单的权限分配
  • 下一篇：Angular2学习笔记
    • 用户评论
    相关文章
    返回顶部

    易笔记手机版