jquery this.siblings不能正常工作

Question

我目前正在为一个显示年份的网站页面创建一个时间表，当点击它时，它应该打开并显示那些年中发生的事情，并将其他内容从其他年份隐藏起来。出于某种原因，我的jquery所做的恰恰相反，它保留了我单击的内容，并每隔一年隐藏一次它们的数据。

这是我的HTML

<div class="timeline">
    <ul>
        <li class="timeli">1996
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1997
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">Test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1999
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
    </ul>
</div>

这里是我的jquery，我想我的问题是我没有完全理解jquery中的.sibling。

$(document).ready(function(){
    $(".timeli").click(function(){
        $(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
    });
});

这是对答案的编辑，它对我非常有效，谢谢你的帮助！

$(document).ready(function(){
        $(".timeli").click(function(){
        $(this).find($(".timeUlSub")).slideToggle("slow", function(){});
    });});

Answer 1

timeUlSub是timeli的子级，而不是同级元素(相同级别的元素)。使用查找()或儿童()

 $(this).find(".timeUlSub").slideToggle("slow", function(){});

或

 $(this).children(".timeUlSub").slideToggle("slow", function(){});

注：children()只搜索一级子类，find()只搜索子级、大类等.

Answer 2

.timeUlSub是单击li元素的子元素。因此，您需要使用.find()而不是.siblings().You也不需要jquery对象，只需为必需的元素使用选择器：

  $(this).find(".timeUlSub").slideToggle("slow", function(){});

完全单击事件：

$(".timeli").click(function(){
      $(this).find(".timeUlSub").slideToggle("slow", function(){});
});

Answer 3

我相信你想隐藏其他元素的子ul，但也要显示那些已经被点击的元素.

$(document).ready(function () {
    $(".timeli").click(function () {
        $(this).siblings().find(".timeUlSub").hide("slow");
        $(".timeUlSub", this).show("slow");
    });
});

这种行为是“打开我点击的那个，隐藏其余的”。

如果你想“切换我点击的那个”，你根本不需要担心兄弟姐妹。

$(".timeUlSub", this).slideToggle("slow");

在JSFiddle上看到它的作用，或第二版.