使用 jquery 显示/隐藏元素答案

【问题标题】：Show/Hide element with jquery使用 jquery 显示/隐藏元素
【发布时间】：2013-04-20 06:36:01
【问题描述】：

我有元素（div），

命名：元素1，元素2，元素3

默认情况下：元素1可见，元素2可见，元素3隐藏

这是我使用的代码

<script type="text/javascript">
    $(document).ready(function () {
        $('#element3').hide();
        $('#element1').click(function () {
            $('#element3').toggle(400);
        });
    });
</script>

我使用上面的代码使 element3 在我单击 element1 时可见。

我的问题

当我点击时如何使元素 2 被隐藏而元素 3 可见在 element1 上？
在 element1 中再次单击后如何恢复默认设置？

【问题讨论】：

您为什么不阅读手册？（这不是我的反对票）

标签： jquery html show-hide

【解决方案1】：

试试

$(document).ready(function () {
    $('#element3').hide();
    $('#element1').click(function () {
        $('#element3').toggle(400);
        $('#element2').toggle(400);
    });
});

演示：Fiddle

【讨论】：

我将不得不投反对票。在 jQuery 1.9 中，它们已从 .toggle() 移出，因为它已被删除。
@Ohgodwhy 他们为点击切换删除了它，而不是显示隐藏切换
@Ohgodwhy：toggle 的显示/隐藏版本还不错：api.jquery.com/toggle 您正在考虑每隔一次点击toggle：api.jquery.com/toggle-event
@BlakePlumb 很好，我编辑了我的反对票。此解决方案将起作用。
这就是我要找的，..对不起我的愚蠢问题，因为我是 jquery/javascript 的新手

【解决方案2】：

您可以使用以下解决方案来解决您的问题：

根据您的要求，当您单击 element1 时，element3 和 element2 将在每次交替单击时分别切换。下面的代码应该可以解决您的问题。

$(document).ready(function () {
    $('#element3').hide();
    $('#element1').click(function () {
        $('#element3').toggle(400);
        $('#element2').toggle(400);
    }); 
});

有关详细信息，另请参阅this link。

【讨论】：

【解决方案3】：

试试这个

<script>
     $(document).ready(function(){
       $('#element1').click(function(){
         $('#element3').toggle();
         $('#element2').toggle();
       }); 
    });
</script>

【讨论】：

好吧，除了另一个答案是正确的而且这个答案是无操作的（document 不应该用引号引起来）。