【发布时间】：2016-02-12 20:44:20
【问题描述】：
我正在寻求帮助来修改我拼凑在一起的代码以扩展面板以显示项目的完整详细信息。
该代码适用于页面上的单个元素。但是，我想更改它，以便可以列出多个项目。但是，目前，当我添加其他面板时，它们不会折叠和展开，只有第一个实例有效。
我假设我需要以某种方式调整 Javascript，以便它可以链接到每个唯一的实例。
我知道 jquery 和 bootstrap 提供了现有的包，但由于我不会深入讨论的原因，这些包对我来说很难实现，所以我希望有人可以帮助我修改此代码以使其正常工作。
window.onload=function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
tagList.style.display = 'none';
document.getElementById('clearance-item-header').addEventListener('click',function(){
var tagList = document.getElementById('tagList')
var style = window.getComputedStyle(tagList)
var display = String(style.getPropertyValue('display'));
if (display == 'none') {
tagList.style.display = 'inline';
document.getElementById('toggleExpandBtn').textContent = '[-]';
} else {
//style.setProperty('height',lineheight*3+'px');
tagList.style.display = 'none';
document.getElementById('toggleExpandBtn').textContent = '[+]';
}
});
}<style type='text/css'>
#tagList { overflow: hidden; }
.clearance-item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.clearance-item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.clearance-item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.clearance-item-title {width:450px; float:left;}
.clearance-item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.clearance-item-detail {width:300px; float:left;}
.clearance-item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-price {width:105px; float:left; padding-right: 60px;}
.clearance-item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
#toggleExpandBtn {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
#clearance-item-header {cursor:pointer;}
#buylink {width:250px; position:relative; overflow:hidden; float:right; margin-top: 5px; margin-left: 10px;}
.buylink-product select {max-width:200px !important;}
.clearance-item-content { padding-top:10px; }
.clearance-item-content h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.clearance-item-content p { margin-bottom:6px; text-align:justify; }
</style> <div class="clearance-item">
<div id="clearance-item-header">
<div class="clearance-item-image">
<img src="images/clearance-item.jpg" width="100" height="100" />
</div>
<div class="clearance-item-title">
<h2>Product Full Title</h2>
</div>
<div class="clearance-item-detail">
<p>Condition: New/Used/Other</p>
<p>Location: Brighton</p>
</div>
<div class="clearance-item-price">
<p>£999.99</p>
</div>
<div id="toggleExpandBtn">[+]</div>
<div style="clear:both;"></div>
</div>
<div id='tagList'>
<div class="clearance-item-content">
<h3>Product Name</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div style="clear:both;"></div>
</div>
</div>【问题讨论】：
标签： javascript html css collapse expand