Question

因此，我需要创建一个包含多个部分的页面，这些部分可以相互独立地展开和折叠。我做了一段时间的研究，并且能够“开发”这个功能：

<h2><a style="text-decoration:none;" onclick="if(document.getElementById('ID') .style.display=='none'){ 
document.getElementById('ID') .style.display='';	 	 
document.getElementById('IDtitle') .innerHTML='- (Collapse)';} 	 	 
else{
document.getElementById('ID') .style.display='none';document.getElementById('IDtitle') .innerHTML='+ (Expand)';}"><span id="IDtitle" style=" cursor: pointer; color: #7CA6C0;">+ (Expand)</span></a></h2>
<p>Visible content</p>
<div id="ID" style="display: none ;">
  My hidden content here
</div>

通过复制上面的内容并只更改ID，我可以创建多个独立运行的扩展器。当我有1到5个这样的时候，这一切都很好。现在我正在开发一个项目，其中添加了很少的bios，我在一个页面上查看其中的45个。还有另外一种方法吗？有没有更好的方法来做我正在做的事情？

Answer 1

现在我将提供一个解决方案，但使用jquery。在这里，您只需要将可扩展元素添加到HTML中，逻辑将是所有元素。

Live demo

$('a').on('click', function(e){
  e.preventDefault();
  var clickedLink = $(this);
  var relatedContainerId = clickedLink.data('container');
  var relatedContainer = $('#' + relatedContainerId);
  if(relatedContainer.is(':visible')){
    relatedContainer.hide();
    clickedLink.find('span').text('+ (Expand)');
  }else{
    relatedContainer.show();
    clickedLink.find('span').text('- (Collapse)');
  }
});

通过data-attributes在链接中设置切换容器id的主要提示。据此你知道你应该打开或隐藏什么div。

UPD：没有Jquery：JsFiddle

使用HTML在同一页面中创建多个扩展块

1 个答案: