javascript - 单击图像的 jquery 网格以显示每个特定内容，但仅显示 1 个部分

Question

您好，我正在尝试创建一个关于我们的页面。

有一个缩略图网格，当您单击一个缩略图时，该缩略图的内容会出现在一组缩略图周围。每个缩略图都有自己独特的内容。

我目前有这个工作但是当你有 1 个缩略图内容时，如果你点击另一个缩略图内容也会出现。

我只想显示一组缩略图内容，而不是多个。

如果这很简单，我很抱歉，我找不到答案......

任何帮助将不胜感激:)

看看我刚才的代码笔 -

`enter code here` http://codepen.io/anon/pen/PNWXYp

Answer 1

不是最优雅的修复，而是:http://codepen.io/anon/pen/NNdmry

这里的问题是您只引用了被点击的对象，因此它只会隐藏/显示被点击的特定对象。为了解决这个问题，我简单地添加了一个潜在显示对象的数组，每次点击都会检查它，任何被识别的都会被隐藏。

$(document).ready(function() {
    $('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var array = ['#john', '#jane', '#agent', '#peter'];
        var i = 0;
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show');
            } else {
                for (i; i < 5; i++) {
                    if (array[i] != collapse_content_selector) {
                        if ($(array[i]).is(':visible')) {
                            $(array[i]).hide();
                        }
                    }
                }
                toggle_switch.html('Hide');
            }
        });
    });
});