jQuery li使用更多文本进行扩展

一直在尝试让这些li元素单独展开，鼠标移过它们时一次展开一个：（使用

数据文本

属性）

另一个使用span

.menu\u text

类。两个都不能在这里工作

使用.append查询数据文本属性的代码：

$(document).ready(function() {
     $("#menu a").hover(function() {
         $(this).append($(this).children.eq(0).html("<span>" + $(this).children.eq(0).data('text') + "</span>")).css({width: 0}).stop(true, true).animate({width: "show"}, 700);
            }, function() {
                    $(this).children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove();
            });
});

我真的需要另一双眼睛。谢谢大家：）

---

问题是，我试图让每个项目在

mouseenter

上展开，然后在

mouseleave

上折叠，但这两种方法都没有成功。

数据文本

方法抛出了一个我没有捕捉到的错误

编辑

下面是另一种使用

数据文本

属性的方法，几乎可以工作，但它扩展了所有

li

元素，而不是其中的一个。。。arggg：

$（文档）.ready（函数（）{
$（“#菜单li”）.hover（函数（）{
$（this）.children（“a”）.append（“+$（this）.children（“a”）.children（“：first child”）.data（'text'）+”）.hide（）.stop（true，true）.animate（{width:“show”}，700）；
}，函数（）{
$（this.children（“a”）.children（：last child”）.stop（true，true）.animate（{width:“hide”}，700.remove（）；
});
});

我通过在

li

样式中添加

float:left

和

clear:all

来解决这个问题。 还向

a

样式添加了

overflow:hidden

和

height

，以避免在

li

扩展时文本向上爬行

---

那么问题出在哪里？我试图在鼠标悬停时设置每个元素的宽度动画，但它不起作用。

数据文本

方法根本没有在其上添加任何内容。好的，

数据文本

方法现在起作用了，但是所有的

li

标记现在都在扩展，而不是单独扩展，这似乎是一个问题。JavaScript是一个需求吗？假设用户将拥有一个定点设备（因此可以使用CSS的

：hover

）。

$(document).ready(function($) {
     $("#menu a").hover(function() {
                $(this).children(".menu_text").stop(true, true).animate({width: "show"}, 700);
            }, function() {
                $(this).children(".menu_text").stop(true, true).animate({width: "hide"}, 700);
            });
});

$(document).ready(function() {
     $("#menu li").hover(function() {
         $(this).children("a").append("<span>" + $(this).children("a").children(':first-child').data('text') + "</span>").hide().stop(true, true).animate({width: "show"}, 700);
            }, function() {
                    $(this).children("a").children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove();
            });
});