时间戳

首页 > 解决方案 > 单击克隆 li 并在 div 中显示

javascript - 单击克隆 li 并在 div 中显示

问题描述

点击li，克隆它并显示在一个div中，如果点击其他li，它应该显示新点击的li。

下面是我的代码和codepen。如果觉得我错过了什么。 https://codepen.io/AnthonyDavid/pen/xxqmqQY

$('li').click(function() {
  $(this).each(function(i) {
    $("<div class='special'>")
      .append($(this).contents().clone())
      .appendTo('#container');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

标签： javascripthtmljquerycss

解决方案

防止任何点击事件a

$('li a').click((e)=>{e.preventDefault();});
$('li').click(function() {
  $(this).each(function(i) {
    $("<div class='special'>")
      .append($(this).contents().clone())
      .appendTo('#container');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<ul>
  <li><a href="">First</a></li>
  <li><div>Second</div></li>
  <li><span>third</span></li>
  <li><h4>Fourth</h4></li>
</ul>

推荐阅读