展开或关闭html/JS中的内容-需要显示部分内容

问题描述：

我想显示部分内容，然后展开或关闭html/JS中的其余内容，

I would like to display partial content, then unfold or close the remaining content in html/JS,

我有如下project.html，实现的是附件图片，在单击之前它不显示任何内容:

I have project.html as below, what I achieved is as attached picture, it doesn't display anything before I clicked:

<style type="text/css">  
#box4{padding:10px;border:1px solid green;}   
</style>  
<script type="text/javascript">  
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){  
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;  
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;  
var openTip = oOpenTip || "";  
var shutTip = oShutTip || "";  
if(targetObj.style.display!="none"){  
   if(shutAble) return;  
   targetObj.style.display="none";  
   if(openTip  &&  shutTip){  
    sourceObj.innerHTML = shutTip;   
   }  
} else {  
   targetObj.style.display="block";  
   if(openTip  &&  shutTip){  
    sourceObj.innerHTML = openTip;   
   }  
}  
}  
</script>  


   <div><button onclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></div>
    <div class="list-group list-group-flush list-group-formset">
      <div class="col-10" id="box4" style="display:none">{% for c in course %}<a href="{% url 'supervisors:course_change' c.pk %}">{{ c }}</a>&nbsp;&nbsp;&nbsp;{% endfor %}</div>
    </div>

答

在这种情况下，您可以使用text-overflow: ellipsis，因此在折叠的项目中，您应该设置具有以下属性的类

In this case you could play with the text-overflow: ellipsisso in your collapsed item you should set a class with the following properties

.collapsed-content {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){  
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;  
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;  

  targetObj.classList.toggle("collapsed-content");

  if(targetObj.classList.contains("collapsed-content")){  
    sourceObj.innerHTML = oShutTip;   
  } else {  
    sourceObj.innerHTML = oOpenTip;   
  }  
}

#box4{padding:10px;border:1px solid green;}
.collapsed-content {

  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

<div><button onclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></div>
    <div class="list-group list-group-flush list-group-formset">
      <div class="col-10 collapsed-content" id="box4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis tortor orci. Vestibulum elementum leo augue, quis accumsan justo consequat in. Pellentesque egestas sollicitudin velit, sed consequat massa lobortis vitae. Integer aliquet arcu eros, id bibendum diam sodales pulvinar. Aenean odio tellus, venenatis a rutrum a, interdum eu turpis. Ut condimentum volutpat aliquam. Praesent auctor ex nec sagittis commodo.
      </div>
    </div>

展开或关闭html/JS中的内容-需要显示部分内容

相关推荐