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

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>