单击时添加div，然后在每次单击后切换它

1. 我正在尝试点击添加，添加的内容将首次出现。

2. 添加之后，我想点击添加，它只会切换“添加”，而不是在每次点击时添加“添加”

jQuery的：

$(function(){ var NewContent='
Added
' $(".add").click(function(){ $("#spin").after(NewContent); }); }); 

HTML：

 add  

这是一个小提琴： http ： //jsfiddle.net/Abgec/

Answer 1

 $(function(){ //start with `NewContent` being the HTML to add to the page var NewContent='
Added
' $(".add").click(function(){ //check if `NewContent` is empty or not if (NewContent != '') { //if `NewContent` is not empty then add it to the DOM $("#spin").after(NewContent); //now that `NewContent` has been added to the DOM, reset it's value to an empty string so this doesn't happen again NewContent = ''; } else { //this is not the first click, so just toggle the appearance of the element that has already been added to the DOM //since we injected the element just after the `#spin` element we can select it relatively to that element by using `.next()` $('#spin').next().toggle(); } }); }); 

这是一个演示： http ： //jsfiddle.net/7yU3n/

.toggle()文档： http ： .toggle()

Answer 2

我有点不同的方法，在第一次点火后替换点击事件，

 $(function(){ var NewContent='
Added
' $(".add").one('click', function(){ var $content = $(NewContent).insertAfter('#spin'); $(this).click(function(){ $content.toggle(); }); }); }); 

http://jsfiddle.net/Abgec/3/

Answer 3

您需要做的就是切换display css属性。 如果它当前为none，则将其更改为您想要的任何显示样式。 如果它当前不是none，则将其更改为none。

Answer 4

您可以通过在开头创建和隐藏“添加”div来简化很多操作。

CSS：

 #spin {display: none;} 

HTML：

 add Added 

jQuery的：

 $(function(){ $(".add").click(function(){ $("#spin").toggle(); }); }); 

换句话说，不是动态创建“已添加”然后切换可见性，而只是切换可见性（从不可见状态开始）。

Answer 5

jQuery的：

 $(function(){ var NewContent='
Added
'; var handleAddItem = function($add) { var added = false, $spin = $('#spin'), //Suggest using something more relevant to the object getting clicked?? $content = $(NewContent); $add.click(function(){ if(added){ added=true; $spin.after($content); }else{ $content.toggle(); } } }; $(".add").each(function(){handleAddItem($(this));}); }); 

Answer 6

可能有更优雅的方式，但这是有效的。

 $(function(){ var NewContent='
Added
' $(".add").click(function(){ var added= $(".added"); if (added.length) { added.toggle(); } else { $("#spin").after(NewContent); } }); }); 

小提琴： http ： //jsfiddle.net/HVSm3/

编辑：当我写这篇文章时，我发誓没有答案

Answer 7

选项1

这将工作（参见JS评论）：

 $(function(){ var NewContent='
Added
' $(".add").click(function(){ // Check if the div exists, if so simply toggle visibility if($(".added").length) $(".added").toggle(); else // Not yet added, add the content $("#spin").after(NewContent); }); }); 

这是一个工作小提琴 。

选项2

如果NewContent不需要是动态的，这是一个更清洁的解决方案：

HTML

 add 
Added 

JS

 $(function() { var NewContent = '
Added
' $(".add").click(function() { $(".added").toggle(); }); }); 

CSS

 .added { display:none; }​ 

这是一个工作小提琴 。

Answer 8

我尝试了很多答案，但我找不到我想要的答案，但有些答案帮助我实现了目标。 所以我正在分享我所做的，也许它可以帮助那些想要完成工作代码的人。

***点击“项目”切换

 var newItemCounter = 1; var ourList = document.getElementById("our-list"); var ourButton = document.getElementById("our-button"); ourList.addEventListener("click", activateItem); function activateItem(e){ $(e.target).children("p").toggle(400); } ourButton.addEventListener("click", createNewItem) function createNewItem(){ ourList.innerHTML+= "  
item " + newItemCounter +"
 

 

"; newItemCounter++; } 

  div p{ display: none; } #our-list ul.child-list li{ float: left; } .fl-right{ display: inline; } 

  
   
 item
 
  

  

 
 


  Add new item