javascript - 如何在第二次单击时再次调整大小并且同时不超过一个 "open"

Question

我是 javascript 的新手(除了将它放在 html 中并将其链接到 html 之外，我完全迷失了)所以我从这里的另一个问题中得到了一个代码，可以在单击后更改图像的大小。整个站点是流动的，因此宽度或每个缩略图从固定大小变为填充容器的宽度，容器是一个灵活的可折叠面板。

问题是让它表现得像可折叠的东西，因为它会随着每次点击从 150px thumb 变为 100% 完整图像，反之亦然，但同时不会有超过一个 100% 的图像。同样，我对此完全陌生......

图片缩略图的html:

<article class="thumb">
<h2>Test Image</h2>
<img id="img-gal" src="img/demopage/image-11.jpg"  style="width:150px; height:150px;" alt=""> </article>

正文关闭前的脚本

<script type="text/javascript">
$(document).ready(function(){
    $('.thumb').on('click', function(){
            $('#img-gal').css('width','100%');
            $('#img-gal').css('height','auto');
    });
});
</script>

[编辑]

这是完整的代码... http://jsfiddle.net/AP7NW/

我接手了，所以我可以确定这不是其他属性的问题。它现在不起作用 T_T。

我想要的 Action ，在描述中是这样的:

-在图库中的几张图片中，用户单击了一张图片缩略图，该缩略图恰好是固定小尺寸的图片(例如图片 11)

-缩略图扩展到页面的 100% 宽度，将其 div 中的其他缩略图以某种网格形式向下移动

-用户点击同一张图片 11，它恢复为缩略图大小

- 用户可以点击另一张图片，它会执行上述操作，但不会“同时打开”两张图片，即最近点击的图片会放大到 100%，而之前点击的所有其他图片都是缩略图大小.

我尽力避免使用灯箱、任何具有工具提示或悬停属性和 slider 的东西。他们通常在智能手机上表现不佳，比如我用来测试的 s4，在这些智能手机上滑动几乎是一种在图片之间切换的习惯，而且不能悬停。另一方面，笔记本电脑很自然地可以点击和悬停。滑动的插件从来都不是免费的，有不同宽度的问题或与它们将在其中使用的实际站点中的 css 冲突。

Answer 1

使用$(this)

<script type="text/javascript">
$(document).ready(function(){
    $('.thumb').on('click', function(){
            $(this).css('width','100%');
            $(this).css('height','auto');
    });
});
</script>