How do I close other form(s) when a new form is opened, using only vanilla JavaScript?

问题: Trying to clone Trello. However, I'm experiencing some problem. I want to be able to open only 1 form and hide/close all other forms while that form is open. ISSUE: If...

问题:

Trying to clone Trello.

However, I'm experiencing some problem. I want to be able to open only 1 form and hide/close all other forms while that form is open.

ISSUE: If you create another list and click the Add card link, another form will appear even though the first form is still showing. I want the first form to disappear when the second form appears. Codepen link: https://codepen.io/Joanc/pen/EGwqJY

// *************** ADD LISTS ***************

// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);

//Declaring index
let listIndex = 0;
let countCard = 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="#">&#8230;</a></div>
    </div>
      <div> 
      <div class="link-wrapper">
      <a href="#" class="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="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
          <div class= "ellipsis"><a href="#">&#8230;</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);
    countCard++;
   // console.log(countCard);
  }
});

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';
    // console.log(listCount + "lists");
  }
}

document.getElementsByClassName('')

//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id){
 if(document.getElementsByClassName(form)[id].style.display == 'block'){
    document.getElementsByClassName(form)[id].style.display = 'none';
    document.getElementsByClassName(link)[id].style.display = 'block';
  }else{	
    document.getElementsByClassName(link)[id].style.display = 'none';
    document.getElementsByClassName(form)[id].style.display = 'block'
  }if(countCard > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(countCard + " cards");
  }
}
/*************** 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="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

This is what is happening: In the first image, all the forms can be opened when I click the Add card button. enter image description here

Instead what should happen is as shown in the screenshot below. where when one Add card form is opened, all other Add card forms closes or is hidden. enter image description here

NOTE: The form to which I'm referring is the form that has the class ="add-item-form" not the form with the class ="add-list-form" (which has the grey background).


回答1:

You can pass this object to hideSHowForm() so that you can show only the grand parent of the currently passed element and hide all the others. Modify the code like with the following:

onclick="hideSHowForm(this,'add-item-form', 'show-card-form', ` + listIndex + `);"

and

function hideSHowForm(curr, form, link, id){
  var allCard = document.querySelectorAll('.add-item-form');
  allCard.forEach(el => el.style.display = 'none');
  document.querySelectorAll('.show-card-form').forEach(a =>a.style.display = 'block');
  curr.parentNode.parentNode.style.display = 'block';
  ---------
  ---------

// *************** ADD LISTS ***************

// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);

//Declaring index
let listIndex = 0;
let countCard = 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="#">&#8230;</a></div>
    </div>
      <div> 
      <div class="link-wrapper">
      <a href="#" class="show-card-form" onclick="hideSHowForm(this,'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="&#88;" onclick="hideSHowForm(this,'add-item-form', 'show-card-form', ` + listIndex + `);">
          <div class= "ellipsis"><a href="#">&#8230;</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);
    countCard++;
   // console.log(countCard);
  }
});

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';
    // console.log(listCount + "lists");
  }
}

document.getElementsByClassName('')

//toggle between links and 'add-list-form'
function hideSHowForm(curr, form, link, id){

  var allCard = document.querySelectorAll('.add-item-form');
  allCard.forEach(el => el.style.display = 'none');
  document.querySelectorAll('.show-card-form').forEach(a =>a.style.display = 'block');
  curr.parentNode.parentNode.style.display = 'block';

 if(document.getElementsByClassName(form)[id].style.display == 'block'){
    document.getElementsByClassName(form)[id].style.display = 'none';
    document.getElementsByClassName(link)[id].style.display = 'block';
  }else{	
    document.getElementsByClassName(link)[id].style.display = 'none';
    document.getElementsByClassName(form)[id].style.display = 'block'
  }if(countCard > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(countCard + " cards");
  }
}
/*************** 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="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->


回答2:

If you are getting current item clicked index then you can simply use a forLoop and check current index = id.

So your hideSHowForm() will be reformed as:

//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id) {
 var elements = document.getElementsByClassName('add-item-form');

 for (var index = 0; index < elements.length; index++) {
  if (id == index) {
   elements[id].style.display = 'block'
   document.getElementsByClassName(link)[id].style.display = 'none';
  } else {
   elements[index].style.display = 'none'
   document.getElementsByClassName(link)[index].style.display = 'block';
  }
 }
}

Working Demo:

// *************** ADD LISTS ***************

// add new list submit eventlistener

document.getElementById("add-list-form").addEventListener("submit", addList);

//Declaring index
let listIndex = 0;
let countCard = 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="#">&#8230;</a></div>
    </div>
      <div> 
      <div class="link-wrapper">
      <a href="#" class="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="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
          <div class= "ellipsis"><a href="#">&#8230;</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);
  countCard++;
  console.log(countCard, 'Counter 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';
  // console.log(listCount + "lists");
 }
}

//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id) {
 var elements = document.getElementsByClassName('add-item-form');
 for (var index = 0; index < elements.length; index++) {
  if (id == index) {
   elements[id].style.display = 'block'
   document.getElementsByClassName(link)[id].style.display = 'none';
  } else {
   elements[index].style.display = 'none'
   document.getElementsByClassName(link)[index].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="&#88;">
						</div>
					</form>
				</div>
			</div>
			<!-- end of board-wrapper -->

  • 发表于 2019-01-01 09:01
  • 阅读 ( 206 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除