動的に付け加えたClassがすぐに反応してしまう

Question

以下の//*ここの箇所をご覧いただきたいのですが、動的にis_expandedが加えられた場合、そのクラスがあれば処理を実行したいと考えております。

動くサンプル
こちらのサンプルをご覧いただければわかりやすいのですが、ドロップダウンリストを作成しており、クリックした開くきっかけとなった要素をクリックすると、リストが閉じるような仕様を想定しております。

これをイメージしたのですが、実際には時差がなく、クリックしたらis_expandedが加えられると同時に反応して$(this).next().slideUp(200,'linear');が動作してしまいます。setTimeOutなどで時間差を設けるような仕様はあまり適切ではないと思っているのですが、どのようにすれば、意図したクラスのつけはずしでドロップダウンリストを隠すことができるかアドバイスをいただければ幸いです。

<div class="btn_wrapper no_margin_bottom dropdown">
  <div class="icon_left"><i class="fas fa-chevron-down"></i></div><div class="btn select_public_text">公式テキストの選択表示</div>
</div>

<div class="dropdown_wrapper public_text">
  <ul>
    <li class="default_li"><div class="icon_left"></div><a>C1</a></li>
    <li><div class="icon_left"></div><a>C2</a></li>
    <li><div class="icon_left"></div><a>C3</a></li>
 </ul>
</div>

 dropdown_list('.dropdown','.dropdown_wrapper li','.dropdown_wrapper','.is_expanded');


function dropdown_list(clicked_item,reverse_item,parent_item,expanded_item){
  $(clicked_item).on('click',function(){
    $(this).addClass('is_expanded')
    $(this).next().slideDown(200,'linear');
  })
  $(reverse_item).on('click',function(){
    $(this).parent().parent().slideUp(200,'linear');
  })
  $(clicked_item).on('click',function(){//*ここ
    if($(this).hasClass('is_expanded')){
      $(this).next().slideUp(200,'linear');
    }
  })
}

Answer 1

希望する動作がわからないのですが以下ではだめですか？

  $('.btn').on('click',function(){
    $('.dropdown_wrapper').slideToggle();
  });

Comments

[pegy]

コメントをいただき、ありがとうございます。slideのアップダウンについては、おっしゃる方法で解決しました。
一方で、アップダウンに合わせてslideの動き以外cssの調整等も行なっているのですが、その場合、対応可能な方法はございますでしょうか？

[pegy]

こちらもtoggleClassで実装できました。
ご放念くださいませ。