[英]How to show 1 form at a time on a page using JavaScript
I'm creating lists which contain cards that are created by the user via forms. 我正在创建包含用户通过表单创建的卡片的列表。
The issue that I'm having here is that I want to show only 1 add-item-form form * on the page at a time (Not 1 form in each list but 1 form on the page overall). 我在这里遇到的问题是我想在页面上一次只显示1个添加项目表单* (每个列表中不是1个表单,而是整个页面上有1个表单)。 So, If a user creates multiple lists, then opens a form by clicking on the Add a card button, and then goes and click on another Add a card button from another list on the page, the first form should disappear, and a new form should appear in the list that it was clicked.
因此,如果用户创建多个列表,然后通过单击添加卡按钮打开表单,然后单击另一个从页面上的另一个列表添加卡按钮,第一个表单应该消失,并且新表单应该出现在单击它的列表中。 Right now, multiple forms are being shown in different lists when I click the Add a card button, especially whenever I create multiple lists.
现在,当我单击添加卡片按钮时,多个表单将显示在不同的列表中,尤其是每当我创建多个列表时。
So basically, whenever Add a card is clicked, if a form is already open somewhere else, it will be closed and a new form will be opened within the list that I clicked the Add a card button. 所以基本上,每当点击添加卡片时 ,如果某个表单已经在其他地方打开,它将被关闭,并且在我单击“ 添加卡片”按钮的列表中将打开一个新表单。
I hope my explanation is useful. 我希望我的解释很有用。 A sample of the code is shown below.
代码示例如下所示。
Here's a link to the code on [Codepen][ https://codepen.io/Joanc/pen/MZjJvy] 1 . 这是[Codepen] [ https://codepen.io/Joanc/pen/MZjJvy] 1上代码的链接。
Your help will be appreciated. 我们将不胜感激。
ATTENTION : I only want to change the cards form with class add-item-form not the list form with id add-list-form . 注意 :我只想更改带有add add-item-form类的卡片表单而不是带有id add-list-form的列表表单 。 The (grey) lists are fine, my only issue is with the cards.
(灰色)列表很好,我唯一的问题是卡片。
// *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">…</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">…</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //}
/*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ }
<div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X"> </div> </form> </div> </div><!-- end of board-wrapper -->
It happens because you iterate with for loop over all add-item-form
elements and add those styles. 之所以发生这种情况,是因为您在所有
add-item-form
元素上迭代for循环并添加这些样式。 You add inline events listeners in addList()
and you are not able to specify which of those elements were actually clicked, since you can't catch an event. 您在
addList()
添加内联事件侦听器,并且您无法指定实际单击了哪些元素,因为您无法捕获事件。 I know how frustrating it may sound to you but I would recommend trying to write it all over again but keeping good practices. 我知道这听起来有多令人沮丧,但我建议我再试一次,但保持良好的做法。 I advise you to use
innerHTML
as little you can, don't add inline styles to HTML in JS. 我建议你尽可能少地使用
innerHTML
,不要在JS中为HTML添加内联样式。 Rather create classes that match your expectations like shown
, hidden
, style them and add them to events. 而是创建符合您的期望的类,如
shown
, hidden
,设计样式并将它们添加到事件中。 Also use addEventListener
instead of adding onclick()
in HTML. 也可以使用
addEventListener
而不是在HTML中添加onclick()
。 You are really close to getting what you want, but its pretty messed up in this form. 你真的很接近你想要的东西,但它在这种形式下相当混乱。
Edit: The simplest workaround I can give you is this, but there is still much work to be done there: 编辑:我能给你的最简单的解决方法就是这个,但还有很多工作要做:
// *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); //Declaring index var listIndex = 0 function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">…</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">…</a></div> </div> </form> </div> </div>`; //Increasing index listIndex++ document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } document.getElementsByClassName('') //toggle between links and 'add-list-form' function hideSHowForm(form, link, id){ // var getForm = document.getElementsByClassName("listContainer"); // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form)[id].style.display == 'block'){ document.getElementsByClassName(form)[id].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[id].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // }
/*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ }
<div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X"> </div> </form> </div> </div><!-- end of board-wrapper -->
Just add these two lines above your const list = document.createElement('div');
只需在
const list = document.createElement('div');
上面添加这两行const list = document.createElement('div');
line inside your addList()
function like this: 你的
addList()
函数里面的行如下:
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
What the above does is assign the list-wrapper
div to a variable called listWrap
and then reset the list-wrapper
div to an empty div whenever someone tries to submit a new form. 上面的操作是将
list-wrapper
div分配给名为listWrap
的变量,然后每当有人试图提交新表单时,将list-wrapper
div重置为空div。 After emptying the list-wrapper
div, the function then proceeds to add the new "add-item-form form" submitted to the empty list-wrapper
div. 在清空
list-wrapper
div之后,该函数继续添加提交给空list-wrapper
div的新“add-item-form form”。
Run the Code Snippet below to see how the above two lines work: 运行下面的代码片段 ,看看上面的两行是如何工作的:
// *************** ADD LISTS *************** // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } var listWrap = document.getElementById("list-wrapper"); listWrap.innerHTML = ""; const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<div class="list-container"> <div class="list-heading" > <h3 contenteditable="true">` + name + `</h3> <div class= "ellipsis"><a href="#">…</a></div> </div> <div> <div class="link-wrapper"> <a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span> </a> </div> <form class="add-item-form"> <textarea placeholder="Enter a title for this card..."></textarea> <div> <input type="submit" value="Add Card"> <input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');"> <div class= "ellipsis"><a href="#">…</a></div> </div> </form> </div> </div>`; document.getElementById("list-wrapper").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } //create card const cardItem = document.createElement('p'); const card = document.createElement('div'); card.setAttribute('class', 'card'); //create pen icon const pen = document.createElement('a'); pen.innerHTML = '<i class="fas fa-pen"></i>'; cardItem.innerHTML = text; card.appendChild(cardItem) card.appendChild(pen); e.target.parentElement.prepend(card); } }); let spans = document.getElementsByClassName("placeholder"); //toggle between 'add a list' and 'add another list' links window.onload = function(){ spans[1].style.display='none'; document.forms[0].style.display='none'; }; let clicked = 0; //toggle between links and 'add-list-form' function toggleDiv(formId, linkId){ clicked++; if(document.getElementById( formId ).style.display == 'block'){ document.getElementById( formId ).style.display = 'none'; document.getElementById( linkId ).style.display = 'block'; }else{ document.getElementById( linkId ).style.display = 'none'; document.getElementById( formId ).style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } //toggle between links and 'add-list-form' function hideSHowForm(form, link){ // var getForm = document.getElementsByClassName("listContainer"); for (var i=0;i<document.getElementsByClassName(form).length;i++){ // getForm[i].style.display = 'block'; if(document.getElementsByClassName(form )[i].style.display == 'block'){ document.getElementsByClassName(form)[i].style.display = 'none'; document.getElementById(link).style.display = 'block'; }else{ document.getElementById(link).style.display = 'none'; document.getElementsByClassName(form)[i].style.display = 'block' }if(clicked > 0) { spans[0].style.display='none'; spans[1].style.display='block'; } } } // function showTitleAndCardSection(){ // var showCardSection = document.getElementsByClassName("listContainer"); // for (var i=0;i<showCardSection.length;i+=1){ // showCardSection [i].style.display = 'block'; // } //}
/*************** ADD LISTS ***************/ .work-board { background-color: transparent; border-radius: 5px; display: flex; flex-direction: row; } #list-wrapper { margin: 8px 5px 10px 0px; padding: 2px; border-radius: 4px; background: transparent; border: none; display: flex; flex-direction: row; } .list { background: transparent; } .list-container { padding: 4px 8px; border-radius: 4px; width: 256px; background-color: rgb(226,228,230); border: none; margin: 2px 5px; } .list-heading { display: flex; flex-direction: row; padding-bottom: 3px; margin-bottom: 5px; } .list .list-heading h3 { margin: 2px 3px 0px 0px; width: 82%; border-radius: 4px; outline:none; font-size: 14px; font-weight: 600; padding: 5px; } .list .list-heading h3:focus{ border: solid 2px rgb(91,164,207); background-color: rgb(255, 255, 255); } .ellipsis { /* display: inline-block; */ width: 30px; text-align: center; border-radius: 4px; margin: 0px 1px 0px 0px; padding: 0px; float: right; } .ellipsis:hover { background-color: rgba(131, 140, 145, 0.2) } form.add-item-form .ellipsis{ margin-top: 5px; padding-bottom: 5px; } a { text-decoration: none; color: rgb(131, 140, 145); font-size: 19px; vertical-align:middle; /* line-height:3px; */ text-align:center; } form#add-list-form { margin-top: 12px; width: 270px; } .form-inner-container { background-color: rgb(226,228,230); padding: 5px 5px 0px 5px; border-radius: 4px; } input[type=text] { height: 32px; display: block; border-radius: 4px; border: solid 1px rgb(91,164,207); width: 247px; font-size: 14px; outline: none; box-shadow: 0 0 0 1px rgb(91,164,207); word-wrap: break-word; overflow: hidden; color: rgb(131, 140, 145); padding-left: 10px; } input[type=submit] { outline: none; font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); padding: 8px 13px; background-color: rgb(90, 172, 68); box-shadow: 0 1px 0 0 rgb(63, 111, 33); border: none; border-radius: 4px; margin: 10px 0; } input[type=submit]:hover { background-color: rgb(71, 138, 53); } input[type=button]{ margin-right: -5px; border: none; background-color: transparent; font-size: 18px; font-weight: 500; color: rgb(131, 140, 145); } input[type=button]:hover{ color: rgb(103,109,112); } form.add-item-form { margin-top: 20px; } form.add-item-form textarea { outline: none; width: 92%; height: 50px; max-height: 120px; padding: 10px; font-size: 14px; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; display: block; word-wrap: break-word; resize: none; margin-top: -5px; } .card { width: 92%; box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2); border: none; border-radius: 3px; background-color: rgb(255, 255, 255); min-height: 18px; word-wrap: break-word; padding: 0px 10px; margin-top: 9px; display: flex; flex-direction: row; position: relative; } .card:hover { background-color: rgba(248,249,249,0.7); } .card p{ position: relative; padding: 0px; margin: 6px 0; font-size: 14px; z-index: 1; } .card a{ position: absolute; margin-left: 220px; z-index: 2; } .fa-pen { font-size: 10px; margin: 0; padding: 7px; border-radius: 4px; } .fa-pen:hover { background-color: rgb(226,228,230); } #add-list-form, .add-item-form { display: none; } .link-wrapper { display: inline-block; margin-top: 20px; } a#show-list-form { text-decoration: none; color: rgb(255, 255, 255); background-color: rgba(1, 1, 1, 0.3); padding: 10px 15px 10px 20px; width: 242px; text-align: left; border-radius: 4px; font-size: 14px; height: 17px; } a#show-list-form:hover { background-color: rgba(1, 1, 1, 0.4); } a#show-list-form span:first-child { padding-right: 172px; } a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){ display: none; /* hides the 'Add another link' when window loads */ }
<div class="board-wrapper"> <div id="workBoard" class="work-board"> <div id="list-wrapper"></div> <div class="link-wrapper"> <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');"> <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span> <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span> </a> </div> <form id="add-list-form"> <div class="form-inner-container"> <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off"> <input type="submit" value="Add List"> <!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> --> <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X"> </div> </form> </div> </div><!-- end of board-wrapper -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.