Javascript 单击一个div时隐藏/显示并放大

我有一个页面，其中有四个内容，每个内容都有一个图像。现在，我的任务是使内容更大 当用户单击特定内容时，使用图像。另外，我需要隐藏所有其他内容

就像这是一个样本

在这里，每个图像都很小，内容也被剪切。当用户单击图像时，我需要隐藏所有其他内容 以及我需要使点击的内容显示完整，并使图像更大。 像这样

为此，我正在做的是用一个类加载所有的内容，然后单击添加隐藏小内容和小内容的div 小图像，并使其他较大的内容和图像可见

此外，如果再次单击，我需要再次显示所有带有图像的小内容

现在我的问题是我必须在这里写入特定的div id，这样它只会使特定的id变大。如何使其更通用

编辑：添加代码

$($(this).find(".view-content")).click(function(){  

        if ( $( this ).hasClass( 'active' ) ) {
            $(this).removeClass('active');
                  $($(this).find(".Boardofadviser1")).show(); 
            $($(this).find(".Boardofadviser")).hide();

            $($(this).find(".views-row-3").show());



        }
        else
        {
           $(this).addClass('active');
           $($(this).find(".Boardofadviser1")).hide(); 
           $($(this).find(".Boardofadviser")).show();
            $($(this).find(".views-row-3").hide());
            $(".Boardofadviser1").nextAll().hide();
            $(".views-row-1.Boardofadviser1").hide();
           $(".views-row-1.Boardofadviser").show();

        }
         });

这是我的HTML页面，其中显示所有小内容，隐藏大内容

---

为了避免使用附加的if/else条件来检查

视图行

是否持有

活动

类，您必须使用

$（此）

context告诉您想要这些类的元素，并在特定类下显示图像，而不影响

事件处理程序尚未调用的其他元素

例如：

var oViewsRow = $('.view-content .views-row');        
oViewsRow.click(function(event) {
    event.preventDefault();

    // Call all DOM elements that have '.views-row' class
    oViewsRow.removeClass('active');
    oViewsRow.find(".Boardofadviser1").show();
    oViewsRow.find(".Boardofadviser").hide();
    oViewsRow.find(".views-row-3").show();

    $(".Boardofadviser1").nextAll().hide();
    $(".views-row-1.Boardofadviser1").hide();
    $(".views-row-1.Boardofadviser").show();

    // Then call that specific '.views-row' DOM element using $(this)
    $(this).addClass('active');
    $(this).find(".Boardofadviser1").hide();
    $(this).find(".Boardofadviser").show();
    $(this).find(".views-row-3").hide();
});

希望这对您的案例有所帮助
您可以使用jQuery.toggle（）来显示/隐藏内容


$（文档）.ready（函数（）{
$（'.small'）。打开（'click'，函数（事件）{
$（'.small'）.parent（）.toggle（'show'）；
$（this.parent（）.next（'div'）.toggle（'show'）；
})
$（'.big'）。在（'click'，函数（事件）{
$（this.parent（）.toggle（'show'）；
$（'.small'）.parent（）.toggle（'show'）；
})
});

建议1
废话废话

建议1
废话废话废话废话

建议2
废话废话

建议2
废话废话废话废话

一般来说，您可以从正在单击的项目（
this
或
event.target
，而不是特定ID）添加类，并在其他项目上添加/删除类。但是您需要添加一些示例html来创建一个完整的example@Me.Name添加了带有HTML页面的jquery代码您为什么在主父级（例如查看内容）中设置[click]事件处理程序代替
img
或
.views行
标记？我必须为每一个指定特定的类，这是我想要避免的，如果我添加更多的类，我需要添加更多的If/else，多亏了代码…在代码中，每次单击div都会使它变大，但同时我需要隐藏其他div视图-row-1，views-row-2等。我该如何做？可以使用$（'.views row'）隐藏其他视图。hide（）然后仅显示使用$（this.show（）单击的特定.views行谢谢你的代码，但正如我在这里说的，我需要再次硬编码类名。没有它我们可以吗？@shv22我不理解这个问题。首先，在我的情况下，没有div id，只有类存在，而且我想让click函数足够通用，这样我就不必每次添加新类时都定义，就像它应该检测到类一样命名并相应地更改文本，你不是说你有四个内容吗？或者你需要在收到通知后立即添加更多内容吗？是的，现在，我有四个内容，但我需要根据需要添加更多内容，这就是为什么我需要更通用的内容