为什么我的jQuery切换不起作用？

Question

我想知道是否有人可以解决这个问题,因为我现在已经尝试了40分钟,这应该不会那么困难.

我有一些嵌套的div像这样:

<div>
<div>
Some info - <a href='#' class='slick-toggle'>[more info]</a>
    <div class='slickbox'>
        <div>
        More Content...
            <a href='#' class='slick-toggle2'>see full XML reply</a><br />
            <div class='slickbox2'>
                    <div class='xmlOutput'>
                       more content from XML source
                    </div>
            </div>
        </div>
    </div>
</div>

现在我想要发生的是当点击类"光滑切换"的链接时,带有"slickbox"类的Div被隐藏或显示.在这个Div中,我点击了这个类"slick-toggle2"的其他链接我想要隐藏或显示类"slickbox2"的div(当页面被加载时,这两个div都被隐藏).因此,如果正在显示"光滑切换",您只能切换"slick-toggle2".这应该很简单,但是切换仅适用于第一个DIV.任何人都可以看到我的jQuery有什么问题

  $(document).ready(function() {

        $('.slickbox').hide();
        $('.slickbox2').hide();

        $('a.slick-toggle2').click(function() {

             $(this).next("div.slickbox2").toggle(400);
            return false;
        });

        $('a.slick-toggle').click(function() {

            $(this).next("div.slickbox").toggle(400);
            return false;
        });

    });

任何人都可以看到我哪里错了？我想我生气了？

请注意,我从代码中的超链接中取出了A,因为它被阻止了？

Answer 1

这是因为在非常下一个元素是<br />,所以不是这样的:

$(this).next("div.slickbox2").toggle(400);

你需要这个:

$(this).nextAll("div.slickbox2:first").toggle(400);

.next()得到非常下一个元素只有当它选择相匹配. .nextAll()经历了以下所有的兄弟姐妹,你得到了:first匹配的兄弟姐妹.