展开或关闭html/JS中的内容-需要显示部分内容 [英] Unfold or close content in html/JS - Need display partial content

问题描述

我想显示部分内容，然后展开或关闭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中的内容-需要显示部分内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！