jQuery动画问题

我有一个嵌套列表和下面显示的jQuery脚本，分别显示/隐藏每个列表（+/-link）和一次显示/隐藏所有列表（显示所有/隐藏子类别）。当我使用show（）和hide（）时，它会按预期工作，但当我使用动画（例如show（'slow'）或slideDown（））时，我会遇到一个奇怪的问题。执行以下操作时：

1-全部显示
2-隐藏亚洲
3-全部隐藏
亚洲四人秀

亚洲人的所有子类别都是可见的，尽管在第3步中一切都结束了

看来问题就在眼前

            $(this).next().show('slow');

在第4步中，就在这一行之前，所有亚洲人的孩子都像预期的那样隐藏了，但是在这一行之后，他们都是可见的，因为只有第一个孩子（0级）应该是可见的

作为测试，我还使用相同的选择器更改了所选元素的颜色。 在步骤4之后，级别为1的亚洲子类别如预期的那样为黑色，但可见。动画似乎也适用于选定元素的子元素

我可能会错过一些东西，但由于这在使用show（）和hide（）时的行为与预期一样，我认为这可能是一个bug

有人能帮忙吗？
谢谢

七月

以下是脚本：

$('ul.subcategory').hide();

$('a.subcategory').click(
    function() {


        if ($(this).next('ul.subcategory').is(':hidden')) {
            $(this).next('ul.subcategory').show('slow');
            $(this).next('ul.subcategory').css('color', 'white');
            $(this).html('–');
        }
        else {
            $(this).next('ul.subcategory').hide('slow');
            $(this).next('ul.subcategory').css('color', 'black');
            $(this).html('+');
        }
    return false;
    }

);

$("a.showall").toggle(
    function() {

        $('ul.subcategory').show('slow');            
        $('ul.subcategory').css('color', 'white');
        $('a.subcategory').html('–');
        $(this).html(' (hide subcategories)');
        return false;
    },

    function() {

        $('ul.subcategory').hide('slow');
        $('ul.subcategory').css('color', 'black');            
        $('a.subcategory').html('+');
        $(this).html(' (show all)');
        return false;
    }         
);

以及HTML：

<ul id="category_region"><span class="category_region">By region </span><a class="showall" href=""> (show all)</a>
    <li><input type="checkbox" name="category" value="1"/>African <a class="subcategory" id="1" href="">+</a>
        <ul class="subcategory level0">
            <li><input type="checkbox" name="category" value="2"/>Algerian</li>
           <li><input type="checkbox" name="category" value="3"/>Senegalese</li>
           ...
       </ul>
    </li>
    <li><input type="checkbox" name="category" value="6"/>Asian <a class="subcategory" id="6" href="">+</a>
        <ul class="subcategory level0">
            <li><input type="checkbox" name="category" value="7"/>East Asian <a class="subcategory" id="7" href="">+</a>
                <ul class="subcategory level1">
                    <li><input type="checkbox" name="category" value="8"/>Chinese</li>
                    <li><input type="checkbox" name="category" value="9"/>Japenese</li>
                    ...
                </ul>
            </li>
            <li><input type="checkbox" name="category" value="10"/>North Asian <a class="subcategory" id="10" href="">+</a>
                <ul class="subcategory level1">
                    <li><input type="checkbox" name="category" value="11"/>Russian</li>
                    <li><input type="checkbox" name="category" value="51"/>Other</li>
                </ul>
            </li>
            ...
        </ul>            
    </li>
    ...
</ul>

按地区划分

非洲人

• 阿尔及利亚人
• 塞内加尔人
...

亚洲人

• 东亚
  • 中国人
  • 日本人
  ...
• 北亚人
  • 俄罗斯人
  • 其他
...

...

---

您是否尝试将效果链接在一起

$('ul.subcategory').show('slow', function() {
  $('ul.subcategories > li').show('slow');
});

// ...

$('ul.subcategories > li').hide('slow', function() {
  $('ul.subcategory').hide('slow');
});

好吧，我知道了

$('ul.subcategory').hide('slow');

仅应用于可见元素，因此我添加了一个普通隐藏（）。代码如下：

 $('a.subcategory').click(
    function() {


        if ($(this).next('ul.subcategory').is(':hidden')) {
            $(this).next('ul.subcategory').show('slow');
            $(this).html('–');
        }
        else {
            $(this).next('ul.subcategory').hide('slow');
            $(this).html('+');
        }
    return false;
    }

);

$("a.showall").toggle(
    function() {

        $('ul.subcategory').show('slow');
        $('a.subcategory').html('–');
        $(this).html(' (hide subcategories)');
        return false;
    },

    function() {

        $('ul.subcategory').hide('slow');
        $('ul.subcategory').hide(); //because the animation does not apply to hidden elements
        $('a.subcategory').html('+');
        $(this).html(' (show all)');
        return false;
    }         
);

---

它不会改变任何事情。无论如何，谢谢。我实际上删除了无用的$（'ul.subcategories>li'）选择器。