Deixe -me mostrar as renderizações primeiro. Se você acha que é muito bom, consulte o código de implementação!
Html:
<div> <ul> <li> <p class = 'iden_add_name'> aplicativo id1 </p> <pan> </span> <div> </div> </li> </ul> <span>+</span> </div> <div> <div> <mpan> </span> <div> x </div> </div> <div> <!-<div> </div>-> <div> <ul> <li> <!-<pan> ID do aplicativo: </span> <pan> <input type = "text" placeholder = " ID1 "> </span>-> </li> </ul> </div> <div> <but uma button> Cancelar </button> <butão> Salvar </button> <butter> Confirm </botão> </div> </div>
CSS:
.iden_top {width: 100%; borda-fundo: 1px Solid #CCC; Hight: 37px; altura da linha: 35px;}. Iden_top ul li {altura: 37px; altura de linha: 35px; Cursor: Ponteiro; Largura: Automático; Preenchimento: 0px 10px; Background-Color: #eee; float: esquerda; radio de borda: 5px 5px 0px; borda: 1px sólido #ccc; margem-fundo: -1px; } .iden_add {float: esquerda; margin -top: -9px; cursor: pointer; Exibição: Block Inline; Texto-Alinhamento: Centro; tamanho da fonte: 25px; largura: 40px; altura: 36px; cor: #2B98FC; Peso da fonte: negrito; Background-Color: #eee; Border: 1px Solid #CCC; Border-Radius: 5px 5px 0px 0px;}. Iden_top_button {Display: Inline-Block; Width: 20px; Altura: 20px; Antecedentes-imagem: URL (../ img/xiug.png); fundo-repeat: sem repetição; tamanho de fundo: 100%; margem: 7px 0px 0px 5px; float: esquerda;}. Iden_top_dete {float: direita; largura: 20px; Altura: 20px; Antecedentes-imagem: URL (../ img/close.png); fundo-repetição: sem repetição; tamanho de fundo: 100%; margem: 7px 0px 0px 5px; float: direita;}. Iden_add_name {float: esquerda; } .data_z_create_box {display: nenhum; Largura: 600px; Min-altura: 200px; Background-Color: #ffff; borda: 1px sólido #ccc; Radio de fronteira: 5px; Posição: Absoluto; Z-Index: 44; TOP: 10%; esquerda: 50%; margem-esquerda: -300px; Box-Shadow: 0px 5px 10px #666} .data_z_create_box_center_quxiao {Background-cor: #ea5d5b; color: #ffff; margin-right: 10px; Largura: Auto! IMPORTANTE; PADDING: 0PX 10PX;}. Data_Z_Create_Box_Center_quxiao: Hover {Background-Color: #D2322D;}. Data_Tips {Padding: 10px; largura: 90%; margem: 0px automático; Cor: #a94442; cor de fundo: #f2dede; borda: 1px Solid #EBCCD1; Radio de borda: 5px;}. Data_Input {Hight: Auto; Padding: 0px 30px;}. Data_input Ul Li {Height: 50px; altura da linha: 50px;}. Data_input_input Entrada {text-indent: 10px; largura: 70%; Altura: 40px; altura da linha: 40px; Radio de fronteira: 5px; borda: 1px sólido #ccc;}. data_input_tips {margin-left: 5%; display: nenhum;}. data_z_create_box_top_title {margin-left: 20px; float; 95%; Float: Right;}. Data_state_buttonl_tips {color: #4cae4c; font-weight: Bold; display: nenhum;}JS:
$ (document) .ready (function (e) {var $ _div = $ ("<div class = '_ id_tips'> Confirme para excluir este aplicativo ID? espaço reservado = ''> </span> ") $ (". Iden_top ul li: eq (0) "). css ({" background-color ":" #fff "," borda-bottom ":" 1px sólido #fff "}). crianças (). Li: Eq (0) "). crianças (". Iden_add_name "). addclass (" ll ") $ (". Iden_top_button "). Clique (função () {$ ("#create_z"). show () $ (". Data_z_create_box"). Show (300) $ (". Data_Z_Create_box_top_title"). Html ("Modifique o aplicativo identificador ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". entrada "). {$ ("#create_z"). Hide () $ (". {$ ("#create_z"). hide () $ (". Data_z_create_box"). hide (300) $ (" ldren (). encontre ("input"). {$ ("#create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) var a = 2; $ (". iden_add"). class = 'iden_add_name'> ID do aplicativo <pange> " + a +" </span> </p> <pan> </span> <div> </div> </li> "); $ (". Iden_top ul "). #ffff "}). crianças (" div "). addclass (" iden_top_dete "); $ _ li.children (" span "). addclass (" iden_top_button ") $ _ li.siblings (). css (" "color de fundo": "#eee" "" " #ccc "}). crianças (" div "). removeclass (" iden_top_dete "); $ _ li.siblings (). crianças (" span "). removeclass (" iden_top_button "); $ _ li.children (".iden_add_name"). addclass ("ll"); $ _ li.siblings (). crianças (". Iden_add_name"). removeclass ("ll"); $ (". Iden_top_dete"). Clique (função () {$ (this) .parent ($ _ li) .addclass ("qq") $ ("#create_z"). show () $ (". ) .html ("tip") $ (". create_z_create_box_center_baocun"). hide (); $ (". Create_Z_Create_Box_Center_Queding"). Show (); $ (". Data_input ul li span "). Remone (); $ (". Data_input Ul Li "). Anexe ($ _ div)}) $ (". Create_z_create_box_center_quxiao "). Click (function () {$ ("#create_z "). hide () $ (". li "). RemoveClass (" qq ")}) $ (". Create_z_create_box_center_queding "). Clique (function () {$ (" Li: Eq (0) "). CSS ({" Background-Color ":" #FFF "," Bottom-Bottom ":" 1px Solid #FFF "}). Children (" span "). addclass (" iden_top_button ")}) $ (". Iden_top_button "). {$ ("#create_z"). show () $ (". Data_z_create_box"). Show (300) $ (". Data_Z_Create_box_top_title"). Html ("Modifique o aplicativo identificador ") $ (". create_z_create_box_center_baocun "). show (); $ (". create_z_create_box_center_queding "). hide (); $ (". entrada "). {$ ("#create_z"). Hide () $ (". {$ ("#create_z"). hide () $ (". Data_z_create_box"). hide (300) $ (" ldren (). encontre ("input"). {$ ("#create_z"). hide () $ (". data_z_create_box"). hide (300) $ _ span1.remove ()}) clis ++; a ++;} $ (". Iden_top ul li"). Click (function) {$ (this) .css ({"Bording"). #ffff "}). crianças (" div "). addclass (" iden_top_dete "); $ (this) .Children (" span "). addclass (" iden_top_button ") $ (this) .siblings (). css (" "color de fundo": "#eee" "" " #ccc "}). crianças (" div "). removeclass (" iden_top_dete "); $ (this) .siblings (). crianças (" span "). removeclass (" iden_top_button "); $ (". iden_top ul li: eq (0) "). crianças (" div "). removeclass (" iden_top_dete "); $ (this) .children (". iDen_add_name "). addclass (" ll););O exposto acima é o código de adicionar navegação de exclusão e modificação com base no HTML+CSS+JS introduzido a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!