菜鸟临时需要做一个网页，有几个问题，求帮助

[GreySky0012]

正在做一个静态的电商菜单网页，每一个商品都可以点开滑动显示详细信息，我现在做的是每一个商品都需要添加三段语句
$(document).ready(function(){
$(".T恤1").click(function(){
$(".T恤1message").slideToggle("slow");
});
});


div.T恤1message
{
}
div.T恤1message
{
margin: 0px;
padding: 5px;
text-align: center;
border: solid 1px;
width: 200px;
display: none;
background: #808080;
}


<img src="T恤1.jpg" class="T恤1">
<br/>
<div class="T恤1message">
<ul type="Circle">
<li>价格：￥49.90</li>
<li>已售：249件</li>
<li>可选颜色：黑白，白紫</li>
<li>可选型号：S,M,L,XS</li>
</ul>
</div>
请问有没有办法可以简略一点，希望可以增加可维护性，拓展商品的时候方便一点，还有第二段语句里面为什么第一个空语句不能少
怎么使网页适应各种分辨率的设备

[MnZlZ]

完整的代码贴上来改，而且使用code标签包裹你上传的代码 如果要适应各种分辨率的设备建议你阅读bootstrap框架的书籍（w3cSchool上直接学习也行），最好先熟悉一下css3的响应式设计。

[SexyCode]

思路：遍历所有相同class的元素或者遍历所有相同的标签，全部给他设置onclick 技术上可以使用Jquery

[GreySky0012]

引用 2 楼 hzy38324 的回复:

思路：遍历所有相同class的元素或者遍历所有相同的标签，全部给他设置onclick 技术上可以使用Jquery

之前也这样想过，但是因为不同的图片对应的div也不同，所以不太清楚怎么做。开始想的是把图片赋值给对象，然后把不同div作为不同对象的属性，但是这样做之后图片一直显示不出来，可能是我的输出语句有问题，后来就放弃这种做法了。JQ的话因为时间不太充裕，所以大概只能做一些简单的处理，如果是稍微深一点的问题可能就没时间了。

[GreySky0012]

引用 1 楼 u013104499 的回复:

完整的代码贴上来改，而且使用code标签包裹你上传的代码 如果要适应各种分辨率的设备建议你阅读bootstrap框架的书籍（w3cSchool上直接学习也行），最好先熟悉一下css3的响应式设计。

完整的代码还在做，因为是做的第一个网页所以进度很慢，目前做的基本就是重复上面三段代码，只是内容不同。适应分辨率的话我可能没时间看太多东西了，因为是临时要做的一个东西，周末就要交了，这个只是一个选作要求，可以放弃。