如何使用css/javascript根据设备宽度使展开折叠不同的div高度

我正在尝试使用Css/simple Javascript（无Jquery）创建一个div expand collapse。我想的div高度，应扩大折叠，根据不同的设备宽度不同。在手机中，与全屏相比，显示的文本应该更少

代码在较小的宽度内运行良好。不幸的是，我面临着全屏工作代码的问题。当我点击“少显示”时，整个div将折叠而不是显示

我是Javascript新手。请建议

下面是我的代码和我的代码笔链接-

Html-

Lorem ipsum dolor sit amet, sea mutat regione discere cu. Et vix aperiam `
`accusata deterruisset, no ius evertitur sententiae.<a style="text-   
 decoration: none;" id="displayText2" href="javascript:toggle();">See 
 More...</a><div class="more-mobile" id="foo2">  Ne movet ocurreret    
 salutatus vix, mnesarchum moderatius eos no. Graeci feugait expetenda ius 
 an. Ne veri referrentur efficiantur mea. Probatus definiebas cu ius, nec 
 aeque soluta hendrerit an.


 <a style="text-decoration: none;" id="displayText"  
 href="javascript:toggle();">See More...</a><div class="more-mobile"  
 id="foo"> 

 Duo id dignissim necessitatibus. Te ornatus accusamus mei, pri id soleat 
 euismod tractatos, eos laudem fabulas eu. Possim philosophia quo eu, 
 accumsan erroribus moderatius pri ex, in vel fuisset antiopam. Doctus 
 vocent ut quo, nam suscipiantur interpretaris ea, duo ea eruditi epicuri 
 apeirian.


An semper pertinacia vituperatoribus sea, mea ei natum oratio scaevola, at  
eum tation persius offendit. Quas deserunt his cu, cum eirmod regione eu, ut 
idque sadipscing has. Nulla iuvaret mel an. Mei eu dicunt assueverit.


</div>
</div>

Javascript-

function toggle() {
var ele = document.getElementById("foo");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "See More...";
}
else {
    ele.style.display = "block";
    text.innerHTML = "See Less";
  }
 } 
 //alert(window.screen.width);
 if (window.screen.width < 766) {

 function toggle() {
var ele = document.getElementById("foo2");
var text = document.getElementById("displayText2");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "See More...";
}
else {
    ele.style.display = "block";
    text.innerHTML = "See Less";
 }
 } 
 }

函数切换（）{
var ele=document.getElementById（“foo”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“查看更多…”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“查看较少”；
}
} 
//警报（窗口、屏幕、宽度）；
如果（窗口、屏幕、宽度<766）{
函数切换（）{
var ele=document.getElementById（“foo2”）；
var text=document.getElementById（“displayText2”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“查看更多…”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“查看较少”；
}
} 
}

我会稍微简化您的解决方案。查看下面的JS小提琴。用于标记的HTML。样式的CSS。JS用于逻辑和DOM操作。希望这些小提琴能有所帮助

在手机上隐藏一些文本

使文本在手机的固定div上可滚动

---

我不能使用java在不同宽度的设备中根据不同的高度来扩展div折叠，但可以使用css和媒体查询来扩展。如果有人可以用简单的javascript（而不是jQuery）来做，请发表一篇文章作为答案。下面，我将使用css给出不同高度div expand collapse的代码-

Html-

<div>
<p>Lorem ipsum dolor sit amet, sea mutat regione discere cu. Et vix aperiam    
accusata deterruisset, no ius evertitur sententiae.</p>
<input class="toggle-box2" id="header2" type="checkbox" >
<label class="label1" for="header2"><span class="displayText2"></span>  
</label>
<div class="more-mobile" id="foo2"> <p> Ne movet ocurreret salutatus vix,  
 mnesarchum moderatius eos no. Graeci feugait expetenda ius an. Ne veri  
 referrentur efficiantur mea. Probatus definiebas cu ius, nec aeque soluta  
 hendrerit an.</p>

 <input class="toggle-box" id="header1" type="checkbox" >
 <label class="label1" for="header1"><span class="displayText"></span> 
 </label>

 <div class="more-one" id="foo">
 <p>Duo id dignissim necessitatibus. Te ornatus accusamus mei, pri id soleat   
 euismod tractatos, eos laudem fabulas eu. Possim philosophia quo eu,  
 accumsan erroribus moderatius pri ex, in vel fuisset antiopam. Doctus 
 vocent ut quo, nam suscipiantur interpretaris ea, duo ea eruditi epicuri  
 apeirian.</p>

 <p>An semper pertinacia vituperatoribus sea, mea ei natum oratio scaevola,   
 at eum tation persius offendit. Quas deserunt his cu, cum eirmod regione   
 eu, ut idque sadipscing has. Nulla iuvaret mel an. Mei eu dicunt 
 assueverit.</p>

 <label class="less" for="header1"><span style="float:right;"  
 class="displayText3">See Less</span></label>
 </div>
 </div>

 </div>

你可以在这里看到密码笔-

---

注意-请将代码笔视图从水平更改为垂直，以查看媒体查询工作，并查看在垂直视图中，即在较小宽度的设备中，仅显示第一个段落，其余部分隐藏，而在较宽的视图设备中，显示前两个段落，其余部分隐藏。

感谢您的回复。您提供的这些代码解决方案正在运行，但这不是我所需要的。假设我有7段文字。在桌面上，我想显示前两段，隐藏其余的。在移动设备中，由于空间较少，我想显示第一段，隐藏其余部分，单击切换按钮即可显示。我的错误！看看这把小提琴。在子对象上循环并基于单击隐藏。使用更多的css可能会有一个更容易的解决方案，但我就是这样做的。唯一的缺点是你们必须刷新屏幕才能看到点击屏幕上显示的p的数量的变化，我知道我想得太多了。这是一个响应性解决方案，适用于任何当前窗口宽度。请参阅代码笔如何在css中实现这一点。请尝试用简单的javascript（而不是jquery）给出类似的解决方案。这是代码笔-

var counter = 0,
    foo = document.getElementById( "foo" ),
    show = document.getElementById( "showText" );

show.addEventListener( "click" , function () {
   if ( counter%2 === 0 ) {
       foo.style.display = "block";
   } else {
       foo.style.display = "none";
   }
   counter++;
});

<div>
<p>Lorem ipsum dolor sit amet, sea mutat regione discere cu. Et vix aperiam    
accusata deterruisset, no ius evertitur sententiae.</p>
<input class="toggle-box2" id="header2" type="checkbox" >
<label class="label1" for="header2"><span class="displayText2"></span>  
</label>
<div class="more-mobile" id="foo2"> <p> Ne movet ocurreret salutatus vix,  
 mnesarchum moderatius eos no. Graeci feugait expetenda ius an. Ne veri  
 referrentur efficiantur mea. Probatus definiebas cu ius, nec aeque soluta  
 hendrerit an.</p>

 <input class="toggle-box" id="header1" type="checkbox" >
 <label class="label1" for="header1"><span class="displayText"></span> 
 </label>

 <div class="more-one" id="foo">
 <p>Duo id dignissim necessitatibus. Te ornatus accusamus mei, pri id soleat   
 euismod tractatos, eos laudem fabulas eu. Possim philosophia quo eu,  
 accumsan erroribus moderatius pri ex, in vel fuisset antiopam. Doctus 
 vocent ut quo, nam suscipiantur interpretaris ea, duo ea eruditi epicuri  
 apeirian.</p>

 <p>An semper pertinacia vituperatoribus sea, mea ei natum oratio scaevola,   
 at eum tation persius offendit. Quas deserunt his cu, cum eirmod regione   
 eu, ut idque sadipscing has. Nulla iuvaret mel an. Mei eu dicunt 
 assueverit.</p>

 <label class="less" for="header1"><span style="float:right;"  
 class="displayText3">See Less</span></label>
 </div>
 </div>

 </div>

  span.displayText2 {
  display: none;
  }

  span.displayText, span.displayText2, span.displayText3 {
  color:blue;
  cursor:pointer;
  }
  .toggle-box,.toggle-box2 {
   display: none;
   }

  .toggle-box ~ div#foo.more-one {
   display: none;
   }

   .toggle-box:checked ~ div#foo.more-one {
   display: block;
   }
   span.displayText:before, span.displayText2:before {

   content:"See More...";
   }
   .toggle-box:checked ~ .label1 span.displayText:before, .toggle-  
   box2:checked ~ .label1 span.displayText2:before {

   content:"See Less";
   }
   @media screen and (max-width: 766px){ 
   span.displayText, span.displayText3 {
   display: none;
   }
   span.displayText2 {
   display: block !important;
   }
   span.displayText, span.displayText2 {
   margin-top: -5px;
   }
   .toggle-box2 ~ div#foo2.more-mobile {
   display:none;
   }

   .toggle-box2:checked ~ div#foo2.more-mobile {
   display:block;
   }
   .toggle-box ~ div#foo.more-one {
   display: block !important;
   }
   }