Использовать jQuery для одновременной анимации высоты различных динамических высотных делений.

У меня есть 6 разных divs с разной высотой. Каждый div содержит динамический контент, поэтому высота каждого div отличается. Начальная высота каждого div устанавливается в 32px с использованием CSS.Использовать jQuery для одновременной анимации высоты различных динамических высотных делений.

Каждый div содержит тег h3. Щелчок на любом теге h3 должен анимировать все divs на их собственные высоты. Повторное нажатие должно возвращать все divs на высоту 32px.

У меня почти есть. В настоящий момент divs расширяются до высоты первого div вместо их собственных высот.

Что я делаю неправильно?

$('.vintage-icons h3').on('click touch',function(){ 

      $('.vintage-icons h3').each(function(){ 
      var autoheight = $('.vintage-icons h3').parent().get(0).scrollHeight; 
      console.log(autoheight); 
      if(!$(this).is(".open")) { 
       $('.vintage-icons h3').parent().animate({'height':autoheight},750); 
       $(this).addClass('open'); 
      }else if($(this).is(".open")) { 
       $('.vintage-icons h3').parent().animate({'height':'32px'},750); 
       $(this).removeClass('open'); 
      } 
      return false; 
      }); 
     }); 

<div class="vintage-icons"> 
    <div> 
     <h3 class="open"><a href="#">TITLE1</a></h3> 
     <p>Dynamic content 1</p> 
    </div> 
    <div> 
     <h3><a href="#">TITLE2</a></h3> 
     <p>Dynamic content 2 Dynamic content 2 Dynamic content 2 Dynamic content 2</p> 
    </div> 
    <div> 
     <h3><a href="#">TITLE3</a></h3> 
     <p>Dynamic content 3 Dynamic content 3 Dynamic content 3</p> 
    </div> 
</div> 

.vintage-icons div{ 
    height:32px; 
    overflow:hidden; 
}

Заранее благодарим за любую помощь!

источник

2017-02-08 Richard Tinkler

Вы можете оставить свой HTML? –

и css также –

опубликовано html & css –

Изменение этой линии: var autoheight = $(this).parent().get(0).scrollHeight;

Не возвращайте ложь.

Тогда это сработает.

<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<script> 
 
$(document).ready(function() { 
 
\t $('.vintage-icons h3').on('click touch',function(){ 
 

 
      $(".vintage-icons h3").each(function(){ 
 
\t    var autoheight = $(this).parent().get(0).scrollHeight; 
 
\t    if(!$(this).is(".open")) { 
 
\t     $(this).parent().animate({'height':autoheight},750); 
 
\t     $(this).addClass('open'); 
 
\t    }else if($(this).is(".open")) { 
 
\t     $(this).parent().animate({'height':'32px'},750); 
 
\t     $(this).removeClass('open'); 
 
\t    } 
 
      }); 
 
     }); 
 
\t }); 
 
</script> 
 
<style> 
 
\t .vintage-icons div{ 
 
\t  height:32px; 
 
\t  overflow:hidden; 
 
\t  width: 60px; 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="vintage-icons"> 
 
    <div> 
 
     <h3><a href="#">TITLE1</a></h3> 
 
     <p>Dynamic content 1</p> 
 
    </div> 
 
    <div> 
 
     <h3><a href="#">TITLE2</a></h3> 
 
     <p>Dynamic content 2 Dynamic content 2 Dynamic content 2 Dynamic content 2</p> 
 
    </div> 
 
    <div> 
 
     <h3><a href="#">TITLE3</a></h3> 
 
     <p>Dynamic content 3 Dynamic content 3 Dynamic content 3</p> 
 
    </div> 
 
</div> 
 
</body>

источник

2017-02-08 17:11:22

У вас есть это:

var autoheight = $('.vintage-icons h3').parent().get(0).scrollHeight;

Это получает значение для первого h3. Затем в each из следующих h3 вы установите то же самое autoheight. Вы, вероятно, могли бы использовать вместо этого:

var autoheight = $(this).parent().get(0).scrollHeight;

Вы можете использовать $(this) в этом случае, так как вы уже внутри each из h3 элементов.

источник

2017-02-08 16:50:00 SHiRKiT

Изменение «.vintage-icons h3» на «это» не имеет никакого значения. Все divs все еще расширяются до высоты первого div. –

Использовать jQuery для одновременной анимации высоты различных динамических высотных делений.

ответ

Смежные вопросы