Question

我正在使用jQuery API中令人惊叹的slideToggle();函数。我遇到的问题是我认为我可以使用以下jQuery代码来定位下一个.slide_toggle_container：

$(document).ready(function() {
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $(".trigger").click(function(){
        $(this).toggleClass("active").next(".toggle_container").slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

}); // End of document.ready

问题是上面的代码适用于以下HTML

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis turpis. Fusce et ante diam, venenatis vestibulum tortor. Nam ultrices accumsan velit sit amet sagittis.</p>

            <a class="trigger toggle" href="#">Read More</a>

            <div class="toggle_container">Sliding Content</div>

但出于样式设计的目的，我需要使用以下HTML，这会导致.trigger和slideToggle无效。

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis turpis. Fusce et ante diam, venenatis vestibulum tortor. Nam ultrices accumsan velit sit amet sagittis.<a class="trigger toggle" href="#">Read More</a></p>

            <div class="toggle_container">Sliding Content</div>

我对某些研究的理解是，上面的HTML（第2个）不起作用，因为.trigger包含在<p>中而slide_toggle_container未被识别为.next() DOM中的元素。有帮助吗？如何使用上面的第二个HTML方案来完成这项工作？

Answer 1

使用parent()方法访问锚点的父级，然后调用next来访问div。

变化：

 $(this).toggleClass("active").next(".toggle_container").slideToggle("slow");

到

 $(this).toggleClass("active").parent().next(".toggle_container").slideToggle("slow");

Answer 2

试试这个

$(document).ready(function() {
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $(".trigger").click(function(){
        $(this).toggleClass("active").closest("p").next(".toggle_container").slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

}); // End of document.ready

jQuery SlideToggle不适用于非语义相邻的元素

2 个答案: