Question

点击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的解决方案。

Answer 1

使用after在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/

Answer 2

结帐：

    

        $(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>

onclick div显示同样的div。我再次单击隐藏或删除div

2 个答案: