1

我有一个简单的有序列表：

<ol>
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ol>

我正在使用 jQuery 创建一个可排序的列表，您可以在其中拖放以重新排序列表中的项目。但我也希望用户能够通过单击“x”图标来删除列表项，其中有序列表编号通常悬停在该图标上。右侧已被“移动”图标（三个水平线）使用。

如果我将鼠标悬停在列表项 2 上，我希望看到：

1. one
X  two     =
3. three

我需要将 2 替换为 anX并且它是可点击的。

（注意：=以上是为了象征移动悬停图标，通常是三个水平线。）

4

4 回答 4

3

问题是您将无法将有序列表更改为无序列表（只需像那样将数字换成 X）。

取而代之的是一个无序列表，其中的数字排列在跨度标签中，我们可以将其换成 X（图像/任何你想要的）。这样也很容易将删除事件绑定到它上面！

css ul li { 列表样式类型：无；}

<ul>
    <li><span>1.</span> one</li>
    <li><span>2.</span> two</li>
    <li><span>3.</span> three</li>
</ul>

jsFiddle 演示

$('ul li').each(function () { 
    var this$ = $(this),
        _old = $(this).find('span').text();

    this$.on({
        mouseover: function () {
            this$.find('span').text('X');
        }, 
        mouseout: function () {
            this$.find('span').text(_old);
        }
    });

    this$.find('span').on('click', function () {
         if ( $(this).text() === 'X') {
            if (confirm('Are you sure you want to Delete?')) {
                $(this).closest('li').remove();
            }
        }
    });
});
​
于 2012-08-23T19:48:04.603 回答
1

将图像用作列表项目符号有三种好方法：

  1. 用来list-style-image更换子弹上的:hover。这种方法的缺点是图像无法真正定位，并且您受图像大小的限制。

    http://jsfiddle.net/bnickel/tCTwJ/

    li:hover {
    list-style-image: url(x.png);
}

  2. 用于list-style-type: none隐藏项目符号并使用:before伪元素放置图像。这在 IE7 上不起作用。

    http://jsfiddle.net/bnickel/LVsYW/

    li {
    position: relative;
}

li:hover {
    list-style-type: none;
}

li:hover:before {
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: -55px;
    background-image: url(x.png);
}

  3. 与 2 类似，您可以仔细调整元素的边距和填充，并在其中放置不重复的背景图像。这可能是最可靠的方法，但它会将您限制在一组非常特定的样式中。

    http://jsfiddle.net/bnickel/LXe4C/

    li:hover {
    list-style-type: none;
    background-image: url(x.png);
    background-position: 0 50%;
    background-repeat: no-repeat;
    margin-left: -55px;
    padding-left: 55px;
}​
于 2012-08-23T22:47:47.293 回答
0

您可以将您的图标放在一个跨度中并绝对定位它。然后只需在 LI 悬停时显示它。

http://jsfiddle.net/S3Ph8/1/

于 2012-08-23T19:55:49.707 回答
0

您可以创建一个新的 css 类来删除项目

li.remove
{
 background-image: url(remove.gif);
 background-repeat: no-repeat;
 background-position: 0 50%;
 padding: 3px 0 3px 20px;
 margin: .4em 0;
}

然后创建一个悬停事件处理程序以将该类添加到突出显示的 li

$('ul li').on('hover', function (){
  $(this).toggleClass('remove');
}).on('click', function(){
   alert($(this).text());    
//take some action
})

这是给你一个粗略的想法，你需要根据你的要求调整它，当然还有一个实际的 gif

于 2012-08-23T19:56:59.660 回答