javascript - 折叠内容 - Javascript CSS

Question

我正在寻求帮助来修改我拼凑起来的代码，以扩展面板以显示元素的完整详细信息。

该代码适用于页面上的单个元素。但是，我想更改它以便列出多个元素。但是，目前当我添加额外的面板时，它们不会折叠和展开，只有第一个实例有效。

我假设我需要以某种方式调整 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>

Answer 1

好的。弄清楚了。将样式 ID 更改为类，并让 javascript 为每个实例动态分配唯一 ID，并将点击事件添加到标题 div。然后使用 this.getAttribute("id") 获取被单击的 header 实例的 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>&nbsp;</p>
      	</div>
      <div style="clear:both;"></div> 
    </div>   
</div>