切換一個div的內容並改變另一個div的高度在jquery

Question

我想切換高度並顯示兩個不同的divs與jQuery相同的onclick事件。我覺得我可能會錯過一些我不知道的jQuery中的小或規則。在第一次點擊時，所有內容都會按計劃顯示並更改高度，但第二個並不會使內容最小化。

JS

jQuery(document).ready(function(){ 
    jQuery('.readmore').on('click', function(event) {   
     if (jQuery("#content").height() == 500) { 
      jQuery("#content").animate(
       {height: "750px"}); 
      jQuery('#hidden').toggle('show'); 
     } 
     else { 
      $("#content").animate({height: "500px"}); 
      jQuery('#hidden').toggle('hide'); 
     } 
    }); 
}); 

的DIV開始了作爲500px高，想的是和750px同時顯示在#hidden內容之間切換之間切換他們。

這裏是我的HTML

<div id="content"> 
<p></p> 
<div id="hidden" style="font-size:18px"> 
<p></p> 
</div> 
</div> 
<div class="content3"> 
<p><a class="readmore" href="javascript://">Read More </a></div> 

Answer 1

您可以只使用內置的show()和hide()功能與jQuery。

當你擁有了它，這一點：

jQuery('#hidden').toggle('show'); 

這

jQuery('#hidden').toggle('hide'); 

被撥動類.show和.hide。因此，如果你的類與默認樣式不同，它們可能會改變你期望的功能。您最初需要.hide類來隱藏事件，但在此之後，不需要切換該類。

jQuery還假設最初的div是總是 500px高。因此，如果#content div的高度小於500px，則需要2次點擊才能再次將其降至最低。你可以調整函數來說明div小於500px高度的情況，它應該都能按預期工作。

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     if (jQuery("#content").height() <= 500) { 
 
      jQuery("#content").animate(
 
       {height: "750px"}); 
 
      jQuery('#hidden').show(); 
 
     } 
 
     else { 
 
      $("#content").animate({height: "500px"}); 
 
      jQuery('#hidden').hide(); 
 
     } 
 
    }); 
 
});

.hide { display: none; } 
 
div { padding: 20px; } 
 
#content { background: #aaa;} 
 
#hidden { background: #eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p>displayed text</p> 
 
<div id="hidden" class="hide" style="font-size:18px"> 
 
<p>hidden text</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

這將擴大高度750px無論初始高度的...然後最小化至500像素的第二次點擊。

Answer 2

如果使用自定義CSS 類改變風格DOM的元素和動畫元素與CSS過渡 而不是寫的太多的代碼jQuery的這將是非常方便的。

這裏是片斷

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     jQuery("#content").toggleClass("expand"); 
 
    }); 
 
});

#content{ 
 
    height:100px; 
 
    background-color:#f0f0f0; 
 
    border:1px solid #E5EAF2; 
 
    -webkit-transition:height 0.6s linear; 
 
    transition:height 0.6s linear; 
 
} 
 

 
.expand{ 
 
    height: 750px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p></p> 
 
<div id="hidden" style="font-size:18px"> 
 
<p> 
 
</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

在上述片斷我已創建一個CSS類expand和剛剛切換與jquery該類，因此高度好。 而對於我使用css transitions到#content的轉換。

希望它有幫助。