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

Question

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

我有如下所示的project.html，我所获得的是附图，在我点击之前它没有显示任何内容：

<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>

Answer 1

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

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

＆＃13;

＆＃13;

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;   
  }  
}

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;