Question

概述：

我正在为一个网站开设Q＆amp; A页面。所有答案最初都是隐藏的。我正试图将答案滑出来。问题和答案旁边几乎没有Q和A的图片。

我想将Q向左移动，将答案向下滑动，并在第一次点击问题时将“A”图片淡入。

在第二次点击同一个问题时，我希望它隐藏起来。如果单击另一个，则隐藏全部并显示答案。

代码：

我无法让代码正常工作。我假设我的DOM树导航有问题，但我不确定是什么。

HTML：

        <div class="faq">
            <div class="faq-question">Question goes here </div>
            <div class="faq-answer-container">
                <div class="faq-answer">Answer goes here </div>
            </div>              
        </div>

这是一个问题/答案组合。页面上总共有五个，它们都使用与显示的类相同的类（它们看起来完全相同，除了消息内容）。

JQuery的：

        <script>
        $(document).ready(function(){



            $(".faq-question").toggle(function(){

                <!-- this slides up all siblings -->

                $(this).siblings().slideUp();

                <!-- animation -->

                $(this).find('.letter-q').animate({left:"-=15"},"slow", function() {
                $(this).closest('faq').find('faq-answer-container').slideDown('slow');
                $(".letter-a").fadeIn("slow");
                });

            },function() {

            <!-- slides up all siblings -->
                $(this).siblings().slideUp();

                <!-- animation -->

                $('.letter-q').animate({left:"+=15"},"slow", function() {
                $(this).closest('faq').find('faq-answer-container').slideUp('slow');
                $(".letter-a").fadeOut("slow");

            });             
        });
        });
    </script>

.letter-q和.letter-a是指定给图片的类。出于某种原因，在第一次点击时，Q淡出，第二次和所有后续点击，所有其他Q开始向右移动。答案永远不会下滑。我对JQuery很新，但我已经阅读了所用的所有内容的API资料。我不确定会出现什么问题。

任何帮助将不胜感激！

Answer 1

我不确定我是否100％了解情况，但我想出了我从这个问题中解脱出来的东西。让我知道我有多远和任何问题，我可以详细说明。

另外，如果您可以发布一个jsFiddle，您当前正在使用的内容，这也会有所帮助。

$(document).ready(function() {
    $('.faq-question-container').click(function() {
        //-- move all instances of .faq-answer-container up
        $('.faq-answer-container').slideUp();

        //-- move 'active' instances back to their original position and remove 'active' class
        $('.faq-question-active').removeClass('faq-question-active').animate({
            left: '-=50'
        });

        //-- slide/animate our question
        $(this).find('.faq-answer-container').slideToggle();
        $(this).addClass('faq-question-active').animate({
            left: '+=50'
        });
    });
});

http://jsfiddle.net/8qzvN/4/

这些评论也应该用正确的语法替换。这些是你正在使用的PHP评论。

替换

<!-- PHP Comment -->

与

// Javascript comment

或

/*
   Group of JS comments
*/

Answer 2

想出来！ JSFiddle：http://jsfiddle.net/HEywH/

如果有人好奇：

$(document).ready(function(){
                $(".faq").each(function(){

                <!-- this is to add the images to the questions and answers -->

                    $(this).prepend('<img src="images/faq-q.png" alt="Question" class="letter-q">');
                    $(this).closest(".faq").find(".faq-answer").prepend('<img src="images/faq-a.png" alt="Answer" class="letter-a">');
                }); 



                $(".faq-question").toggle(function(){

                    <!-- this initializes the state -->

                    $(this).closest(".faq").siblings(".faq").find(".faq-answer-container").slideUp();
                    $(this).closest(".faq").siblings(".faq").find(".letter-a").fadeOut();
                    $(this).closest(".faq").siblings(".faq").find('.letter-q').animate({left:"25px"},"fast");

                    <!-- animation -->

                    $(this).closest(".faq").find('.letter-q').animate({left:"-=15px"},"slow");
                    $(this).closest('.faq').find('.faq-answer-container').slideDown('slow');
                    $(this).closest(".faq").find(".letter-a").fadeIn("slow");

                },function() {

                <!-- initialization -->
                    $(this).closest(".faq").siblings(".faq").find(".faq-answer-container").slideUp();
                    $(this).closest(".faq").siblings(".faq").find(".letter-a").fadeOut();
                    $(this).closest(".faq").siblings(".faq").find('.letter-q').animate({left:"25px"},"fast");

                    <!-- animation -->

                    $(this).closest(".faq").find('.letter-q').animate({left:"25px"},"slow", function() {
                        $(this).closest('.faq').find('.faq-answer-container').slideUp('slow');
                        $(this).closest('.faq').find(".letter-a").fadeOut("slow");
                    });
                });             
            });
        </script>

    </head>
    <body>
        <div class="faq-container">
            <img src="images/faq-header.jpg" alt="faq header">
            <div class="faq">
                <div class="faq-question">How much is the application fee? Can I request an application fee waiver? </div>
                <div class="faq-answer-container">
                    <div class="faq-answer">The application fee is $70 and we do not offer fee waivers at this time. </div>
                </div>              
            </div>

事实证明我的DOM遍历非常糟糕。一点研究，我就能弄明白我的问题。

JQuery：动画/遍历DOM树

2 个答案: