1

我试图只使li:nth-child(2)宽度动画从230px到780px。

我已经这样做了，但是现在只要li在本节中有一个，它就会给出nth-child(3)那个宽度780px。

我如何只影响我尝试的一个元素的宽度？

JS：

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage ul > li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

我也试过这个：

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

HTML：

<div class="homepage">
  <ul>
    <li>content here</li>
    <li>
      <ul>
        <li>content here</li>
        <li>content here</li>
        <li>content here</li>
      </ul>
    </li>
    <li>content here</li>
  </ul>
</div>

提前感谢您提供的帮助:)

4

1 回答 1

4

请改用此选择器：

.homepage > ul > li:nth-child(2)

这将适用于您在上面发布的 html，因为现在它仅适用于 aul的直接后代，<div class="homepage">因此不适用于您的 sub ul。

于 2012-04-23T10:36:32.833 回答