个人中心
gpt4 book ai didi

javascript - JQuery 切换问答 : individual Q&As don't operate correctly unless you click on Open All/Close All first

转载 作者：行者123 更新时间：2023-11-28 03:00:22 24 4
gpt4 key购买 nike

我有一个问答列表，顶部有“打开全部/关闭全部”，其中有单独的打开和关闭图像按钮，单击时会进行切换。效果很好。

然后进行单独的问答，每个问答都有自己的开始和结束图像。

如果您在页面加载后首先单击“打开全部/关闭全部”，然后单击各个问答打开/关闭图像，则一切正常。但是，如果在页面加载后您单击各个问答打开/关闭图像，绕过“打开全部/关闭全部”，它们会显示不适当的打开或关闭图像。

这是页面代码:

<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 问题，否则我会在此处包含该代码。我需要以某种方式初始化脚本吗？还是我在上面的脚本中犯了错误？

最佳答案

我会这样做。

Working Demo →

编辑:

更新代码以具有简单的打开/关闭链接。

带有注释的代码解释了我的方法:

<!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>

关于javascript - JQuery 切换问答 : individual Q&As don't operate correctly unless you click on Open All/Close All first，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1210036/

24 4 0
文章推荐： java - Android TextView 设置 HTML 图像后没有正方形的图像
文章推荐： css - 创建自己的 css 模板或在 bootstrap 中购买现成的 css 模板
文章推荐： html - 在html中的div右侧插入箭头
文章推荐： asp.net - ASCX控件和window.onload函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com