如何使用css / javascript根據設備寬度使折疊高度不同的div高度

Question

我正在嘗試使用Css /簡單Javascript（沒有Jquery）進行div展開折疊。 我希望div的高度可以伸縮，根據設備的寬度不同而有所不同。 在移動設備中，與全屏顯示相比，顯示的文字更少。

代碼在較小的寬度上運行良好。 不幸的是，我在全屏模式下工作時遇到了問題。 當我單擊“顯示較少”時，整個div折疊而不顯示。

我是Java語言的新手。 請提出建議。

下面是我的代碼和我的鏈接，codepen - http://codepen.io/anon/pen/JYbRyp

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>

CSS-

 a#displayText2 {
 display: none;
 }
 div#foo {
display: none;
}
div#foo2 {
display: block;
}

@media screen and (max-width: 766px){
a#displayText2 {
display: block !important;
}
a#displayText {
display: none;
}
div#foo {
display: block !important;
}
div#foo2 {
display: none;
}

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

Answer 1

我會稍微簡化您的解決方案。 查看下面的JS小提琴。 用於標記的HTML。 樣式的CSS。 JS用於邏輯和DOM操作。 希望這些小提琴能有所幫助。

在移動JS小提琴中隱藏一些文本

使文本在移動js小提琴2的固定div上可滾動

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

Answer 2

我無法使用Java在各種寬度的設備中根據各種高度使div折疊展開，但可以使用CSS和媒體查詢來進行同樣的操作。 如果有人可以用簡單的javascript（而不是jQuery）做到這一點，請發布答案。 在下面的代碼中，我使用CSS給出了不同高度div展開折疊的代碼-

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>

這是CSS代碼-

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

您可以在此處查看codepen- http: //codepen.io/anon/pen/wKdZRE

注意-請將Codepen視圖從水平更改為垂直，以查看媒體查詢工作，並在垂直視圖（即較小寬度的設備）中僅顯示第一個參數，而在較寬視圖的設備中則保持隱藏，而前兩個參數為顯示，其余隱藏。