CSS删除列表中的div

Question

我和<li>有一份清单

我想让一个删除div在用户单击X时滑入。

我希望红色的div能够与其内容一起增长，标题文本要有省略号。

如果你看这个例子，第一个<li>是我想要的开始结果，第二个是我想要的最终结果。

Example

我该怎么做呢？

Example 2

Answer 1

您可以将X和Delete键放在同一个容器中，然后通过jQuery切换元素：

<ul>
   <li>
       <div class="title">
       <div class="actions">X</div>
       <div class="actions2">Delete</div>
   </li>
</ul>

jQuery：

<script>
    $("li").hover(
        function() {
            $(this).find(".actions").hide();
        }, function() {
            $(this).find(".actions2").show(); //or animate here
    });
</script>

Answer 2

这是包含CSS动画的a working example，在退出时关闭删除按钮，并在单击删除按钮时实际删除父<li>。

我将操作按钮设置为div.title的子级，并将它们绝对定位在<li>的右上角，并调整了<li>的填充以适应活动操作按钮的宽度。我还将inDeleteMode类提升到<li>以实现更好的级联。