Question

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

1 - 显示全部
2隐藏亚洲
3 - 全部隐藏 4-show asian

亚洲的所有子类别都是可见的，认为在步骤3中所有内容都已关闭。

似乎问题在于

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

在第4步中，就在此行之前，所有亚洲儿童都按预期隐藏，但在此之后，他们都是可见的，以为只有第一个孩子（等级为0）应该可见。

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

我可能会错过一些东西，但由于这只是在使用show（）和hide（）时的行为，我认为这可能是一个错误。

有人可以帮忙吗？感谢

月

这是脚本：

$('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('&#x2013;');
        }
        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('&#x2013;');
        $(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>

Answer 1

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

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

// ...

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

Answer 2

好的，我发现了。

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

仅适用于可见元素，所以我添加了一个普通的hide（）。这是代码：

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


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

);

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

        $('ul.subcategory').show('slow');
        $('a.subcategory').html('&#x2013;');
        $(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;
    }         
);

jQuery动画问题

2 个答案: