Переключить содержимое div и изменить высоту другого div в JQuery

Question

Я пытаюсь переключить высоту и отобразить два разных divs на том же onclick событии с jquery. Я чувствую, что я могу пропустить что-то маленькое или правило в 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 высокий. Итак, если div #content меньше 500px, для его минимизации требуется 2 щелчка. Вы можете настроить функцию для учета экземпляров, где div меньше 500 пикселей, и все должно работать как ожидалось.

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 независимо от начальной высоты ... затем сворачиваться 500px на второй мыши.

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.

Надеюсь, это поможет.