Question

当一个人点击H4标签内的问题时，我想切换位于html代码下面的P标签中的答案。完全是jQuery的新手。不确定如何在搜索中找到这个问题以找到答案。感谢帮助社区！

    <script type = "text/javascript">
    $(document).ready(function()
    {
        $("#part3 h4").click(function()
        {
            $("p").toggle();
        }
    });
</script>
<div id="part3">
    <h2>3: FAQ Hide/Show Demo</h2>
    <a href="#">Show All</a> | <a href="#">Hide All</a>
    <div class="faq">          
            <h4>1.How much does it cost? </h4>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
                  <strong>aliquam</strong> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
                 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
                 commodo consequat. </p>
            </div>
            <h4>2.What is the meaning of life? </h4>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt<strong> ut laoreet dolore</strong> magna 
                 a<em>liquam erat volutpat. Ut wisi e</em>nim ad minim veniam, quis nostrud 
                 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
                 commodo consequat. </p>
            </div>
            <h4>3.Why is the sky blue?</h4>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet <strong>dolore magna 
                 aliquam</strong> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud 
                 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
                 commodo consequat. </p>
            </div>
            <h4>4.Why is the real cost of money?</h4>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
                 aliquam erat volutpat. <strong>Ut wisi enim ad minim</strong> veniam, quis nostrud 
                 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
                 commodo consequat. </p>
            </div>
    </div>
</div>

Answer 1

您可以在点击处理程序中使用它。

$(this).next().find('p').toggle();

Answer 2

这是您正在尝试构建的手风琴布局，如果您切换div元素而不是p元素，也会更好。

还要启用显示/隐藏所有功能

<a href="#" class="showall">Show All</a> | <a href="#" class="hideall">Hide All</a>

然后

$(document).ready(function () {
    $("#part3 h4").click(function () {
        $(this).next().toggle();
    });
    $("#part3 .showall").click(function () {
        $("#part3 .faq > div").show();
    });
    $("#part3 .hideall").click(function () {
        $("#part3 .faq > div").hide();
    });
});

演示：Fiddle

在点击功能中，您需要定位所点击的h4元素的下一个兄弟元素，因此您需要使用tree traversal函数.next()

jQuery toggle（），如何选择一个更改另一个dom元素的dom元素

2 个答案: