Question

我试图通过点击H3标签来打开和关闭section元素。我现在尝试了很多选项，无法让jQuery工作。有人可以发现下面的错误吗？

    <div class="sectiondrop">
    <h3>Download</h3>
    <section>
    <a class="label-en" href="/files/label-eng.pdf" target="_blank"><span></span>Label (ENG)</a>
            <a class="label-af" href="/files/_label-afr.pdf" target="_blank"><span></span>Label (AFR)</a>
            <a class="label-msds" href="/files/_ds.pdf" target="_blank"><span></span>DS</a>
            <a class="label-brochure-1" href="/files/eng.pdf" target="_blank"><span></span>Eng Brochure</a>
    </section>
    </div>




    <div class="sectiondrop">
    <h3>Download</h3>
    <section>
    <a class="label-en" href="/files/label-eng.pdf" target="_blank"><span></span>Label (ENG)</a>
            <a class="label-af" href="/files/_label-afr.pdf" target="_blank"><span></span>Label (AFR)</a>
            <a class="label-msds" href="/files/_ds.pdf" target="_blank"><span></span>DS</a>
            <a class="label-brochure-1" href="/files/eng.pdf" target="_blank"><span></span>Eng Brochure</a>
    </section>
    </div>


    jQuery( ".sectiondrop h3" ).click(function() {
        //alert ("hello");
        jQuery(".sectiondrop").find('section').toggle( "slow");
    });

Answer 1

使用$(this)和.next()：

jQuery(this).next('section').toggle("slow");

或.siblings()：

jQuery(this).siblings('section').toggle("slow");

正如你的标记所说，h3包含click事件的section没有名为.find()的子项或子项，所以它永远找不到它。

而不是.next()使用.siblings()或h3，因为它是一个兄弟姐妹，可以在$(this)所在的同一级别使用。

并且您还必须在当前上下文中执行此操作，因此请使用{{1}}在当前上下文中获取elem。

Answer 2

section是h3元素的下一个兄弟，因此您需要使用.next()。 .find()用于获取后代元素

jQuery( ".sectiondrop h3" ).click(function() {
    //alert ("hello");
    jQuery(".sectiondrop").next('section').toggle( "slow");
});

Answer 3

使用.next（）查找部分或nextAll以获得更动态的解决方案

jQuery( ".sectiondrop h3" ).click(function() {
    //alert ("hello");
    jQuery(this).next().toggle( "slow");
});

或nextAll

jQuery( ".sectiondrop h3" ).click(function() {
    //alert ("hello");
    jQuery(this).nextAll('section:first').toggle( "slow");
});

DEMO

使用jQuery Find方法打开和关闭部分

3 个答案: