異なる動的高さdivの高さに同時にアニメーションを適用するにはjQueryを使用してください

それぞれ異なる高さの6つのdivがあります。各divには動的コンテンツが含まれているため、各divの高さは異なります。各divの初期高さは、CSSを使用して32pxに設定されています。異なる動的高さdivの高さに同時にアニメーションを適用するにはjQueryを使用してください

各divにはh3タグが含まれています。任意のh3タグをクリックすると、すべてのdivをそれぞれの高さにアニメートする必要があります。再度クリックすると、すべてのdivが32pxの高さに戻ります。

私はほとんどそれを持っています。現時点では、divはそれぞれの高さではなく最初の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;

はfalseを返しません。

次に動作します。

<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

あなたはこれを持っている：これは最初のh3の値を取得します

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

。次に、eachの中でh3に同じautoheightに設定します。おそらく、代わりにこれを使用することができます：あなたはh3要素のeach内に既にあるので、あなたがこのケースで$(this)を使用することができます

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

。この行に

出典

2017-02-08 16:50:00 SHiRKiT

'.vintage-icons h3'から 'this'に変更しても差はありません。すべてのdivはまだ最初のdivの高さに拡張されます。 –

異なる動的高さdivの高さに同時にアニメーションを適用するにはjQueryを使用してください

答えて

関連する問題