0

Overview:

I'm working on a Q&A page for a website. All the answers are initially hidden. I'm trying to animate the answers sliding out. There are little pictures of Q and A next to the questions and answers, respectively.

I want to move the Q to the left, have the answer slide down, and the "A" picture to fade in on first click of the question.

On the second click of the same question, I want it to hide. If another one is clicked, hide all and display the answer.

Code:

I can't get the code to work properly. I'm assuming there is something wrong with my DOM tree navigation but I'm not sure what.

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>

This is one question/answer combo. There are five total on the page and they all use the same classes as the one shown (they all look exactly the same except for message content).

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 and .letter-a are the classes designated to the pictures. For some reason, on first click, the Q fades out and on second and all subsequent clicks, all the other Q's start shifting to the right. The answer never slides down. I'm fairly new to JQuery but I've read the API material on everything I used. I'm not sure what's going wrong.

Any help would be appreciated!

4

2 回答 2

0

我不确定我 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
*/
于 2012-11-21T18:18:44.157 回答
0

弄清楚了！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 遍历非常糟糕。一点点研究，我就能弄清楚我的问题。

于 2012-11-21T21:45:59.267 回答