如何在包含问题答案的超链接之后显示/隐藏（切换）接下来的 div？答案

【问题标题】：How to show/hide(toggle) the div coming next after the hyperlink which contains answers of the qestion?如何在包含问题答案的超链接之后显示/隐藏（切换）接下来的 div？
【发布时间】：2014-03-28 13:47:45
【问题描述】：

我有以下 HTML 代码：

    <div id="body">
    <div class="container-fluid" style="padding-bottom: 50px;">
        <div class="row-fluid">
            <div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
                <div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
                    <ul style="padding: 0;">
                        <li>
                            <div class="list-div">
                                <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a>
                                </div>
                                <div style="text-align: left;">Question 1.</div>
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                                <div style="width: 74%; float: left;">
                                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                </div>
                                <br/>Question :
                                <br/>
                                <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html>

                                    <body>
                                        <p>Current versus time and voltage versus time graph of a circuit element is shown below :
                                            <img src="http://www.example.com/upload_media/questions/original/1330939560_49.jpg">
                                            <img height="68" src="http://www.example.com/upload_media/questions/original/1330939630_49.1.jpg" width="117">
                                        </p>
                                    </body>

                                </html>
                                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
                                </div> <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>

                            </div>
                            <div class="list-div">
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                                <div style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                        <div class="radio-select">1)</div>
                                        <div class="radio-div">capacitance of 2 F</div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">capacitance of 1 F</div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">a voltage souice of emf 1V</div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">
                                            <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
                                        </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>2</div>
                                    </label>
                                </div>
                            </div>
                            <li>
                                <div class="list-div">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a>
                                    </div>
                                    <div style="text-align: left;">Question 2.</div>
                                    <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                                    <div style="width: 74%; float: left;">
                                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                    </div>
                                    <br/>Question :
                                    <br/>
                                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                    <html>

                                        <body>
                                            <p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p>
                                        </body>

                                    </html>
                                    <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                        <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
                                    </div> <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>

                                </div>
                                <div class="list-div">
                                    <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                                    <div style="width: 100%; margin-top: 8px;">
                                        <label class="radio-section" for="radio_1">
                                            <div class="radio-select">1)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_2">
                                            <div class="radio-select">2)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_3">
                                            <div class="radio-select">3)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_4">
                                            <div class="radio-select">4)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_2">
                                            <div style="text-align: left;"><b>Correct Answer :</b>1</div>
                                        </label>
                                    </div>
                                </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="text-align: center;"> <a class="btn btn-default">BACK</a>

    </div>
</div>

点击显示答案后如何隐藏/显示（切换）每个问题的答案。此外，当显示答案时，超链接应该是“隐藏答案”，当答案被隐藏时，超链接应该是“显示答案”。如何使用 jQuery 实现这一点？

上述HTML的jsFiddle是：http://jsfiddle.net/isherwood/rBCTg/

任何人都可以更新小提琴并使功能可行吗？

【问题讨论】：

呃。所有这些内联样式，以及在 Bootstrap 之上。简化的小提琴怎么样？这是一个开始：jsfiddle.net/isherwood/rBCTg
@isherwood：非常感谢您为我制作小提琴所做的努力。你能帮我解决我的问题吗？
当然，一旦您提供了一个简化的演示。清理我给你的东西，更新它，然后发布它和上面的简化 HTML。让我们更轻松。
@isherwood：我已经更新了我的问题。简化了 HTML 代码。
您嵌套了HTML 标记和doctype 语句的事实表明并非如此。示例代码也不应该有内联样式。

标签： jquery html hyperlink toggle show-hide

【解决方案1】：

每个问题都有一个编号。创建一个 ID 等于问题编号的 <span>。然后为该跨度创建一个 onclick，在其中将跨度的文本更改为“隐藏答案”并显示属于该问题的 div。

jQuery：

<script type="text/javascript">
    $(document).ready(function() {
        var clickables = $('.clickable');

        $.each(clickables, function(i, clickable) {
            $(clickable).on('click', toggle);
        });

        function toggle() {
            var id = this.id;
            var span = $('#' + id);
            var answerDiv = $('#answer_' + id);
            if (answerDiv.is(':visible')) {
                span.text("Show Answer");
                answerDiv.css('display', 'none');
            } else {
                span.text("Hide Answer");
                answerDiv.css('display', 'block');
            }
        }
    });
</script>

JavaScript：

<script type="text/javascript">

    var clickables = document.getElementsByClassName("clickable");

    function toggle() {
        var id = this.id;
        var span = document.getElementById(id);
        var answerDiv = document.getElementById('answer_' + id);
        if (answerDiv.style.display === 'block') {
            span.innerHTML = 'Show Answer';
            answerDiv.style.display = 'none';
        } else {
            span.innerHTML = 'Hide Answer';
            answerDiv.style.display = 'block';
        }
    }

    for (var i = 0; i < clickables.length; i++) {
        clickables[i].addEventListener('click', toggle, false);
    }


</script>

HTML：

<span id="1" class="clickable">Show Answer</span><br/>
<div class="answer" id="answer_1" style="display:none">
    Here are the answers you may not see yet!
</div>

编辑： 为了满足它的全部需求，我添加了一个 jQuery 选项。测试并为我工作。可以看看这个！

【讨论】：

onclick 属性应该是最后的手段。 HTML 之外的单个事件处理程序是更好的方法。
想详细说明为什么？
谷歌“内容和展示的分离”。这是一个可维护性的问题，而不是重复自己。
我现在明白了，但有哪些替代方案（首先，如果用户不使用外部 JavaScript 库，例如 jQuery）？
stackoverflow.com/questions/19655189/…

【解决方案2】：

您应该将每个问题区分为它对应的<span>，然后在每个问题上加上onClick。您可以随意隐藏/显示。

祝你好运。

【讨论】：

onclick 属性应该是最后的手段。 HTML 之外的单个事件处理程序是更好的方法。