一旦我单击div(class="a")
,我想将内容放入该div
的内部并在同一div
中显示。
如果我单击相同的div
,则再次不应显示下显示的内容。
这是我的html
<div class="">
Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div><br>
<div class="">
Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div><br>
<div class="">
Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
我需要使用jQuery或JS的解决方案。
在div之后插入文本之后,使用班级检查是否存在该物品,如果该项目的目前删除
尝试以下内容:
$('div').click(function() {
$(this).toggleClass('red');
if ($(this).next().is('.isVisible')) {//test if the item is present
$(this).next().remove();//remove it
} else {
$(this).after('<div class="isVisible">' + $(this).text() + '</div>');//add it
}
});
演示:https://jsfiddle.net/bq1hewvs/8/
结帐此:
$(document).ready(function(){
$('div.one p').css("visibility", "hidden");
$('div.two p').hide();
$('div.one').click(function(){
$('div.one p').css("visibility", "visible");
$('div.two p').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" style="border:2px solid red; width:50% ;height:30%;" >
<p>content</p>
</div>
<div class="two"><p>div two content</p></div>