选择相应的第n个元素以显示但隐藏所有兄弟姐妹

Question

我有一个无序列表，每个列表项对应一个文本块。当我点击列表项时，我希望显示相应的文本块，同时隐藏所有其他兄弟。我希望这可以使用任意数量的列表项。列表和文本块始终对应1到1.基本上，单击主题1应显示文本块1，同时隐藏其他文本，单击主题2应显示文本块2并隐藏其他文本，依此类推。我无法让代码在下面工作。有什么建议吗？

jquery的：

$(document).ready(function(){
    $(".topics li").click(function(){
        $(this).siblings().removeClass("active");
        $(this).attr("class","active");
        var index = $(".topics li").index(this);

        $("div.chatContent").eq(index).show(150);
        $("div.chatContent").eq(index).siblings.hide(150);
    });
});

HTML代码段为：

                    <div class="topics">
                        <ul>
                            <li>Topic 1</li>
                            <li>Topic 2</li>
                        </ul>
                    </div>

                    <div class="chatContent">
                        <ul>
                            <li>Block of text 1 </li>
                        </ul>
                    </div>

                     <div class="chatContent">
                        <ul>
                            <li>Block of text 2 </li>
                        </ul>
                    </div>

Answer 1

发现语法错误，

$("div.chatContent").eq(index).siblings().hide(150);
//--------------------------------------^  missing brackets here..

DEMO

更正代码：

$("div.chatContent").hide();

$(".topics li").click(function () {
    $('.active').removeClass("active");
    $(this).addClass("active");
    $("div.chatContent").hide(150).eq($(this).index()).show(150);
});

Answer 2

Demo

• .siblings()而非.siblings
• 只有.siblings()会隐藏所有兄弟姐妹 - 包括<ul>和<li>。因此，您需要使用.siblings('.chatContent')。
• 最初，您需要隐藏.chatContent

---

$(document).ready(function () {
    $('div.chatContent').hide();
    $(".topics li").click(function () {
        $(this).siblings().removeClass("active");
        $(this).attr("class", "active");
        var index = $(".topics li").index(this);

        $("div.chatContent").eq(index).show(150).siblings('.chatContent').hide(150);
    });
});