我正在寻找帮助，修改我拼凑的代码以扩展面板以显示项目的完整详细信息。
该代码适用于页面上的单个元素。但是，我想更改它，以便列出多个项目。但是，目前当我添加其他面板时，它们不会折叠并仅展开第一个实例。
我假设我需要以某种方式调整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>
答案 0 :(得分：0)
你说
目前，当我添加其他面板时，它们不会折叠并仅展开第一个实例
你能提供一些附加面板的代码吗？虽然我建议您确保每个面板和按钮都有唯一的ID，但是很难看清代码。否则，您将从js获得您遇到的结果。
答案 1 :(得分：0)
行。弄清楚了。将样式ID更改为类，并获得javascript以动态地为每个实例分配唯一ID，以及向标题div添加click事件。然后使用this.getAttribute（＆＃34; id＆＃34;）来获取被单击的标头实例的id。用于将显示设置为内联或无关联内容。
window.onload=function(){
var headerclassname = document.getElementsByClassName("item-header");
for(var i=0;i<headerclassname.length;i++){
headerclassname[i].addEventListener('click', toggleContent, false);
headerclassname[i].id = 'item-header-' + i;
}
var contentclassname = document.getElementsByClassName("item-content");
for(var x=0;x<contentclassname.length;x++){
contentclassname[x].style.display = 'none';
contentclassname[x].id = 'item-content-' + x;
}
var toggleclassname = document.getElementsByClassName("item-toggle");
for(var y=0;y<contentclassname.length;y++){
toggleclassname[y].id = 'item-toggle-' + y;
}
}
var toggleContent = function() {
var headerid = this.getAttribute("id");
var contentid = headerid.replace("item-header-", "item-content-");
var toggleid = headerid.replace("item-header-", "item-toggle-");
var displayvalue = document.getElementById(contentid).style.display;
if (displayvalue == 'none') {
document.getElementById(contentid).style.display = 'inline';
document.getElementById(toggleid).textContent = '[-]';
} else {
document.getElementById(contentid).style.display = 'none';
document.getElementById(toggleid).textContent = '[+]';
}
}<style type='text/css'>
.item-content { overflow: hidden; }
.item {border:2px solid #C00;border-radius:4px;background: #FFF; padding:10px; width: 675px; margin-left:auto; margin-right:auto; position:relative;}
.item-image {width:200px; height:100px; float:left; padding-right: 10px;}
.item-image img {display: block; margin-left: auto; margin-right: auto; height: 100px;}
.item-title {width:450px; float:left;}
.item-title h2 {margin-bottom:7px; padding-top: 3px; color:#C00; font-size:24px; font-weight:bold;}
.item-detail {width:300px; float:left;}
.item-detail p {margin-bottom:7px; color:#000; font-size:16px; font-weight:bold;}
.item-price {width:105px; float:left; padding-right: 60px;}
.item-price > div {margin-bottom:7px; color:#C00; font-size:18px; font-weight:bold; text-align:right;}
.item-toggle {width: 30px; position:absolute; right: 8px; bottom: 8px; font-size:24px; font-weight:bold; color:#C00; z-index:9999;}
.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;}
.item-description { padding-top:10px; }
.item-description h3 { margin-bottom:8px; color:#000; font-size:16px; font-weight:bold;}
.item-description p { margin-bottom:6px; text-align:justify; }
</style><div class="item">
<div class="item-header">
<div class="item-image">
<img src="image.jpg" width="100" height="100" />
</div>
<div class="item-title">
<h2>Item Title Here</h2>
</div>
<div class="item-detail">
<p>Condition: New</p>
<p>Location: Brighton</p>
</div>
<div class="item-price">
<p>£100.00</p>
</div>
<div class="item-toggle">[+]</div>
<div style="clear:both;"></div>
</div>
<div class="item-content">
<div id="buylink">
<?PHP processWebCodes("Type: BuyLink
Layout: Combined
Product: 1200811
1200811-AllVariants: True");?>
</div>
<div class="item-description">
<h3>Sub Title Here</h3>
<p>Detailed Description Here</p>
<p> </p>
</div>
<div style="clear:both;"></div>
</div>
</div>