如何使用JavaScript在页面上一次显示1个表单

时间：2018-12-29 21:03:15

标签： javascript html css

我正在创建包含用户通过表格创建的卡片的列表。

我在这里遇到的问题是，我只想一次在页面上仅显示 1个 add-item-form 表单* （而不是1个表单）在每个列表中，但页面上总共有1个表单）。因此，如果用户创建了多个列表，请通过单击添加卡按钮打开一个表单，然后单击另一个列表中的另一个添加卡按钮在页面上，第一个表单应该消失，并且新表单应该出现在被单击的列表中。现在，当我单击添加卡按钮时，在不同的列表中会显示多种形式，尤其是在创建多个列表时。

因此，基本上，每当单击添加卡时，如果已经在其他位置打开了表单，它将被关闭，并且在我单击的列表中将打开一个新表单。添加卡按钮。

我希望我的解释有用。代码示例如下所示。

这里是[Codepen] [https://codepen.io/Joanc/pen/MZjJvy] 1上代码的链接。
您的帮助将不胜感激。

注意：我只想更改类别为 add-item-form 的卡片形式，而不是ID为 add-list-form 的卡片形式强>。 （灰色）列表很好，我唯一的问题是卡片。

// *************** 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="#">&#8230;</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="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');">
          <div class= "ellipsis"><a href="#">&#8230;</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="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

2 个答案:

答案 0 :(得分：1)

之所以会这样，是因为您在所有add-item-form元素上使用for循环进行迭代并添加了这些样式。您在addList()中添加了内联事件侦听器，由于无法捕获事件，因此无法指定实际单击了哪些元素。我知道您可能会感到沮丧，但我建议您尝试重新编写一次，但要保持良好的习惯。我建议您尽量少使用innerHTML，不要在JS中向HTML添加内联样式。而是创建符合您期望的类，例如shown，hidden，设置其样式并将其添加到事件中。还可以使用addEventListener而不是在HTML中添加onclick()。您真的很接近想要的东西，但是这种形式的东西很混乱。

编辑：我可以给您的最简单的解决方法是，但是仍然有很多工作要做：

// *************** 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="#">&#8230;</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="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');">
          <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);
  }
});

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="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

答案 1 :(得分：0)

只需在const list = document.createElement('div');函数内的addList()行上方添加这两行，如下所示：

var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";

上述操作是将list-wrapper div分配给名为listWrap的变量，然后在有人尝试提交新表单时将list-wrapper div重置为空div。清空list-wrapper div后，该函数将继续向空白list-wrapper div添加新的“添加项形式表单”。

运行下面的代码段，以查看以上两行的工作方式：

// *************** 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="#">&#8230;</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="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form');">
          <div class= "ellipsis"><a href="#">&#8230;</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="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

相关问题
最新问题