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 是点击的 li 元素的子元素。因此你需要使用 .find() 而不是 .siblings()。你也不需要 jquery 对象，你可以简单地使用所需元素的选择器：

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

完成点击事件：

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

Answer 2

timeUlSub 是 timeli 的子元素，而不是同级元素（同级元素）。使用 find() or children()

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

或

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

Note : children() searches for first-level children only, find() searches children, grand-children and so on.

Answer 3

我相信您想隐藏其他元素的子元素 ul，但也显示一个元素的子元素 ul已被点击...

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

这种行为是"open the one I click and hide the rest"。

如果你想要"toggle the one I click"，你根本不需要担心兄弟姐妹。

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

See it in action on JSFiddle, or the second version.

Answer 4

.timeUlSub 不是兄弟元素，而是 .timeli 的子元素。

您应该将代码重构为：

$(".timeli").click(function(){

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

});

更好的实现方式是委托点击：

$(document).on("click", ".timeli", function(){

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

});

jquery this.siblings 工作不正常

jquery this.siblings not working correctly

html

javascript

jquery

elements