Question

我已经搞砸了一段时间了。我拼凑了我找到的代码并且还没有找到完美的解决方案。它几乎可以工作。我正在使用php将文本字符串转换为faq部分，方法是将<p>标记添加到文本字符串的每一行。然后我使用jquery为每个<p>添加类。然后我有jQuery隐藏显示切换，所以当点击一个问题时，显示答案。我有那个工作。我现在需要的是让jQuery在点击其他问题时隐藏其他答案。这是我的代码：

<script type="text/javascript">
            jQuery(document).ready(function($) {
                $ ('#faq p:even').addClass('question');
                $ ('#faq p:odd').addClass('answer');

                $('.answer').hide();

                $('.question').click(function(e){

                    e.preventDefault();
                    // hide all span
                    var $this = $(this).parent().find('.answer');
                    $(".answer").not($this).hide();

                    // here is what I want to do
                    $(this).next(".answer").slideToggle( "slow", function() {
                    // Animation complete.
                    });

                });

            });
        </script>

和一些示例html

<div id="faq">
<p class="question">Question 1</p>
<p class="answer">Answer 1</p>
<p class="question">Question 1</p>
<p class="answer">Answer 1</p>
<p class="question">Question 1</p>
<p class="answer">Answer 1</p>
</div>

整个想法是我可以在wordpress编辑器中键入内容并将其转换为常见问题解答部分，而无需进行大量预编码。

Answer 1

您的答案选择器存在缺陷。它按原样选择所有答案。（如果每个问题/答案对都包含在容器元素中，它就可以工作。）

为什么不按照点击的问题获取元素？

$('.question').click(function (e) {
    var $this = $(this).next('.answer');
    $(".answer").not($this).slideUp();

    // here is what I want to do
    $(this).next(".answer").slideToggle("slow", function () {
        // Animation complete.
    });

});

Demo

jQuery显示隐藏相同的类并隐藏以前打开的标记

1 个答案: