JQuery переключает вопросы и ответы: отдельные вопросы и ответы не будут работать правильно, если вы сначала не нажмете «Открыть все / Закрыть все» - PullRequest
Новая
       10

JQuery переключает вопросы и ответы: отдельные вопросы и ответы не будут работать правильно, если вы сначала не нажмете «Открыть все / Закрыть все»

1 голос
/ 31 июля 2009

У меня есть список вопросов и ответов с надписью «Открыть все / Закрыть все» вверху с отдельными кнопками открытия и закрытия изображения, которые переключаются при нажатии. Это отлично работает.

Затем следуйте индивидуальным вопросам и ответам, и у каждого есть свое открытое и закрытое изображение.

Если сначала нажать кнопку «Открыть все / закрыть все», как только страница загрузится, а затем нажать на отдельные вопросы и ответы, открыть / закрыть изображения, все работает нормально. Но если после загрузки страницы вы нажимаете на отдельные вопросы и ответы, открывают / закрывают изображения, минуя «Открыть все / Закрыть все», они отображают неподходящее открытое или закрытое изображение.

Вот код страницы: 

<div class="answersee"><span>Open All</span><img src="assets/open.gif" border="0" alt="" /></div>
<div class="answerhide"><span>Close All</span><img src="assets/close.gif" border="0" alt="" /></div>

<div class="qa">
<div><img src="open.gif" border="0" alt="" /><span class="question">Question.</span></div>
<div class="answer"><p>Answer.</p></div>
</div>

Вот скрипт (также использует Jquery): 

$(function() {
    $(".qa").click(function() {
        $(this).find("div").next().slideToggle("fast");
        if ($(this).find("div:eq(0)").find("img").attr("src") == "open.gif") {
            $(this).find("div:eq(0)").find("img").attr("src", "close.gif");
        }
        else {
            $(this).find("div:eq(0)").find("img").attr("src", "open.gif");
            }
    });
    $(".answersee").click(function() {
        $(".answer").show("fast");
        $(".qa > div > img").attr("src", "close.gif");
        $(".answerhide").show();
        $(".answersee").hide();
                    })
    $(".answerhide").click(function() {
        $(".answer").hide("fast");
        $(".qa > div > img").attr("src", "open.gif");
        $(".answersee").show();
        $(".answerhide").hide();
                    })
});

Я не думаю, что это проблема CSS, или я бы включил этот код здесь. Нужно ли каким-то образом инициализировать скрипт? Или я ошибся в приведенном выше скрипте?

Ответы [ 4 ]

1 голос
/ 31 июля 2009

Вот как бы я это сделал.

Рабочая демоверсия & rarr;

EDIT:

Обновите код, чтобы иметь простую ссылку открытия / закрытия.

Код с комментариями, объясняющий мой подход: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>
    body
    {
        font-family: "Verdana";
        font-size: 12px;

    }
    .question
    {
        background-color: #ccc;
        cursor: pointer;
        padding: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid #000;
    }

    .answer {
        padding: 5px;
    }


</style>

<script>



    $(document).ready(
        function()
        {
            //Hide all the answers on page load.
            $('.answer').hide();

            //For all questions, add 'open'/'close' text.
            //You can replace it with an image if you like. 
            //This way, you don't need to specify img tag in your HTML for each question.
            $('.question')
                .append(' <span>[ open ]</span>');


            //Now there are two ways to toggle the visibility of answer.
            //Either click on the question OR click on Open All / Close All link.
            //To use the same code for both instances, we will create
            //a function which will take the 'question' div and toggle the answer for it.
            //Advantage of this approach is that the code to toggle the answer is in
            //one place.

            //By default, this function will try to toggle the status of the answer
            //i.e. if it's visible, hide it otherwise show it.
            //This function will take a second argument called 'showAnswer'.
            //If this argument is passed, it overrides the toggle behavior.
            //If 'showAnswer' is true, answer is shown.
            //If it's false, answer is hidden.
            //This second parameter will be used by the 'openAll', 'closeAll' links.
            var toggleAnswer = function toggleAnswer(question, showAnswer)
            {
                //The way I have structured the HTML, answer DIV is right after 
                //question DIV.
                var $answer = $(question).next('div');

                //Animation callback, after the animation is done, we want to 
                //switch the 'text' to display what could the user do with the question.
                //Once again, you can change this code to show open/close image.
                var updateText = function()
                                 {
                                    var text = $answer.is(':visible') ? ' [close] ' : ' [open] ';
                                    $(question).find('span').html(text);
                                 }

                var method = null;

                if(arguments.length > 1)
                {
                    //If the function was called with two arguments, use the second
                    //argument to decide whether to show or hide.
                    method = showAnswer === true ? 'show' : 'hide';
                }
                else
                {
                    //Second argument was not passed, simply toggle the answer.
                    method = $answer.is(':visible') ? 'hide' : 'show';
                }

                $answer[method]('fast', updateText);
            };

            //On each question click, toggle the answer. 
            //If you have noticed, I didn't enclose both Q&A inside one DIV.
            //The way you have done if user clicks on the answer, answer will collapse.
            //This may not be desirable as user may want to copy the answer
            //and he won't be able to.
            $('.question').click(function(){ toggleAnswer(this);});

            //We will reuse the same toggleAnswer method in openAll, closeAll 
            //handling. This way, if you want to change behavior of how the question/answers
            //are toggled, you can do it in one place.
            $('#openClose').click(
                function() 
                { 
                    var showAnswer = $(this).html().toLowerCase().indexOf('open') != -1 ? true : false;
                    $('.question').each(function() { toggleAnswer(this, showAnswer); });
                    $(this).html(showAnswer ? 'Close All' : 'Open All'); 
                    return false;
                } 
            );

        }
     );
</script>
<html>
<head>
<title>simple document</title>
</head>
<body>

<a id='openClose' href='#'>Open All</a>

<br /><br />

<div class='question'>Question 1</div>
<div class='answer'>Answer 1</div>

<div class='question'>Question 2</div>
<div class='answer'>Answer 2</div>

<div class='question'>Question 3</div>
<div class='answer'>Answer 3</div>

</body>
</html>
0 голосов
/ 31 июля 2009

Redsquare and Solution Йоги:

Спасибо. Я отвечу позже и также опубликую рабочую демонстрацию, чтобы вы могли видеть проблему более ясно Извините, я должен был сделать это раньше.

Liz

0 голосов
/ 31 июля 2009

Спасибо, что нашли время, чтобы предоставить это. Я попробую это позже сегодня и доложу. В моей версии я переключаю функцию «Открыть все / Закрыть все». Это выглядит чище и проще в использовании, поскольку вам не нужно двигать мышь.

0 голосов
/ 31 июля 2009

Вам необходимо использовать обратные вызовы, потому что ваша анимация не будет завершена к тому времени, чтобы проверить, какое изображение показывается. 

 $(".qa").click(function() {
    $(this).find("div").next().slideToggle("fast", toggleImage);
 }

 function toggleImage(){
    var $img = $(this).find("img");
    $img.attr('src') == "open.gif" ? $img.attr('src', "close.gif") : $img.attr('src', "open.gif");

 }

N.B. Есть более эффективные способы сделать это, но сначала давайте начнем работать, а затем посмотрим, не хотите ли вы еще немного изменить его.

...