可折叠内容编辑器 [英] collapsible content editor

问题描述

嗨专家，

我在网页上添加了内容编辑器（使用Sharepoint 2016），内容代码的源代码粘贴在下面。

基本上它是一个可折叠的网页部分，当用户点击显示摘要栏时，内容显示。 

问题是当我点击"显示摘要"时;按钮，整个页面刷新，但内容没有显示...如何让它按预期工作？

这是该部分的屏幕截图

这是源代码。

< script> 
 var coll = document.getElementsByClassName（" collapsible"）; 
 var i; 
 
 for（i = 0; i< coll.length; i ++）{
 coll [i] .addEventListener（" click"，function（）{
 this。 classList.toggle（" active"）; 
 var content = this.nextElementSibling; 
 if（content.style.maxHeight）{
 content.style.maxHeight = null; 
 } else {
 content.style.maxHeight = content.scrollHeight +" px"; 
} 
}）; 
} 
< / script> 
 
< style> 
 .collapsible {
 background-color：＃777; 
颜色：白色; 
 cursor：pointer; 
填充：18px; 
宽度：100％; 
 border：none; 
 text-align：left; 
 outline：none; 
字体大小：15px; 
} 
 
 .active，.collapsible：hover {
 background-color：＃555; 
} 
 
 .collapsible：在{
 content：'\ 002B'之后; 
颜色：白色; 
 font-weight：bold; 
 float：right; 
 margin-left：5px; 
} 
 
 .active：在{
 content：" \ 2212" ;; 
} 
 
 .content {
 padding：0 18px; 
 max-height：0; 
溢出：隐藏; 
过渡：max-height 0.2s缓出; 
 background-color：＃f1f1f1; 
} 
< / style> 
 
< p>报告汇编程序仪表板< / p> 
< button class =" collapsible"> Show Summary< / button> 
< div class =" content"> 
< p>摘要的占位符< / p> 
< / div> 

解决方案

试试这个;  ----添加  事件。 preventDefault （） ;

 
 < script>   
   var   coll   =   document  。  getElementsByClassName  （ " collapsible"  ）;   
   var   i  ;   
 
   for    （  i   =     0   ;   i  <   coll  。  length  ;   i   ++）    {  
 coll   [  i  ]。  addEventListener  （ " click"  < span class ="pun">，    function  （event）    { 
   事件。 preventDefault （）;    
 
 此 。  classList  。  toggle  （ " active"  ）;   
   var  内容  =    此 。  nextElementSibling  ;   
  如果   （  content  。  style  。  maxHeight  ）{  
 content  。  style  。  maxHeight   =     null  ;   
  }     else     {  
 content  。  style  。  maxHeight  < span class ="pun"> =   content  。  scrollHeight   +    " px"   ;   
  }   
  }）;   
  }   
  < /脚本>  
 

Hi experts,

I added a Content Editor to a page (using Sharepoint 2016), the source code of the content code is pasted below.

Basically it's a collapsible web part, when user clicks on the Show Summary bar, the content shows. 

The issue is when I click the "Show Summary" button, the whole page is refreshed, but the content does not show... How to make it work as I expected?

This is the screenshot of the part

This is the source code.

<script>
	var coll = document.getElementsByClassName("collapsible");
	var i;
	
	for (i = 0; i < coll.length; i++) {
	  coll[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.maxHeight){
		  content.style.maxHeight = null;
		} else {
		  content.style.maxHeight = content.scrollHeight + "px";
		} 
	  });
	}
</script>

<style>
    .collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

<p>Report Assembler Dashboard</p>
<button class="collapsible">Show Summary</button>
<div class="content">
  <p>Place holder for summaries</p>
</div>

解决方案

Try this;  ---- Added  event.preventDefault();

<script>
	var coll = document.getElementsByClassName("collapsible");
	var i;
	
	for (i = 0; i < coll.length; i++) {
	  coll[i].addEventListener("click", function(event) {
	       event.preventDefault();	
               this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.maxHeight){
		  content.style.maxHeight = null;
		} else {
		  content.style.maxHeight = content.scrollHeight + "px";
		} 
	  });
	}
</script>

这篇关于可折叠内容编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！