当仅使用普通JavaScript打开新表单时，如何关闭其他表单？

时间：2018-12-30 06:44:06

标签： javascript html css

尝试克隆Trello 。

但是，我遇到了一些问题。我希望只能打开1个表单并在打开该表单时隐藏/关闭所有其他表单。

问题：：如果您创建另一个列表并单击“添加卡”链接，则即使第一个表单仍在显示中，也会出现另一个表单。我希望第二种形式出现时第一种形式消失。 Codepen链接：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 -->

正在发生的事情：  在第一个图像中，当我单击添加卡按钮时，可以打开所有表单。 enter image description here

相反，应发生的情况如下面的屏幕快照所示。当打开一个添加卡表单时，所有其他添加卡表单将关闭或隐藏。 enter image description here

注意：：我要引用的表单是具有 class =“ add-item-form” 的表单，而不是具有类=“ add-list-form” （具有灰色背景）。

2 个答案:

答案 0 :(得分：2)

您可以将 this 对象传递给 hideSHowForm（），以便仅显示当前传递的元素的祖父元素，并隐藏所有其他元素。修改代码，如下所示：

 public class verbindung { 

     public static void main(String[] args) {
        String filename = "betreuen_4.csv";
        File file = new File(filename);

        ArrayList<caring> betreuen = new ArrayList<caring>();

        try {
            Scanner inputStream = new Scanner(file);
            while(inputStream.hasNext()) {
                String data = inputStream.next();
                String[] values = data.split(",");
                int PInummer = Integer.parseInt(values[1]);
                String MNummer = values[0];
                String KundenID = values[2];
                System.out.println(MNummer);
                //create the caring object with the required paramaters
                caring _caring = new caring(MNummer, PInummer, KundenID);
                //add _caring object to the betreuen array here as it is within the same scope.
                betreuen.add(_caring);
            }
            inputStream.close();
        }catch(FileNotFoundException e) {
            e.printStackTrace();
        }
        //this will cause a compilation error
        //betreuen[0] = MNummer;

        //this will also cause a compilation error because it is out of the scope of _caring
        //betreuen.add(_caring);
    }
}

和

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


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 */
}

答案 1 :(得分：1)

如果要获取当前项目的单击索引，则只需使用forLoop并选中current index = id。

因此，您的hideSHowForm()将重新设置为：

//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 ***************

// 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 -->

相关问题
最新问题