jquery - レスポンシブ幅のslideUp/slideDown jqueryジャンプの問題を修正することは可能ですか?

Question

slideUp/ slideDownジャンプについては多くの投稿がありましたが、その中で最も役立つのはRemy Sharp の投稿です。ただし、これは、非表示にする div の高さが変わらない場合にのみ状況に対処します。

html が次のようになっているとします。

<h3>Title</h3>
  <p>Content</p>
<h3>Title</h3>
  <p>Content</p>
<h3>Title</h3>
  <p>Content</p>

jquery は次のようになります。

$(document).ready(function(){
    var $listing = $('p');
    var $listingTitle = $('h3')


$listing.addClass('hide');


$listingTitle.click(function(){

    if ($(this).next("p").hasClass("active-listing") === true) {
      $listing.slideUp(500).removeClass("active-listing");
    } else {


$listing.slideUp(500).removeClass("active-listing");
  $(this).next("p").slideDown(500).addClass("active-listing");

    }

});


});  

Remy の修正プログラム (私が試したもの) を使用すると、最初は完全に機能します。ただし、レスポンシブ サイトでは<p>、ブラウザーのサイズを手動で変更すると、それぞれの高さが変わります。次に、それぞれの新しい長さ

は異なり、大きな間隔の問題を引き起こす可能性があります。特定の幅を div に追加したり、高さを照会したりせずに、ジャンプの問題を解決する方法はありますか?