Question

我有<li>

的列表

我希望在用户点击X时插入一个删除div。

我希望红色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

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

我将动作按钮设为div.title的子项，并将它们绝对放在<li>的右上角，并调整<li>的填充以允许有效宽度动作按钮。我还将inDeleteMode类提升到<li>以获得更好的级联效果。

CSS删除列表中的div

2 个答案: