一度目のクリックでは反応しない

Question

クリックしたら上からドロップメニューが下りてくるようにしたい

jQueryでLPを作っています。スマートフォン用のものを作っているのですが、ハンバーガーメニュー（三←こんな形のメニュー）をクリックしたら形が✖マークに変形し、上からドロップメニューが下りてくる仕様にしたいと思っています。
しかし、クリックすると、一度目ではハンバーガーメニューが変形しません。2度目のクリックで、ようやく✖マークに変形します。ドロップメニューは問題なく表示されます。

HTML

<div id="humberger-menu">
  <span class="line-1"></span>
  <span class="line-2"></span>
  <span class="line-3"></span>
</div> 
      
<div class="drop-menu">
  <ul>
    <li>hoge</li>
    <li>hoge</li>
    <li>hoge</li>
  </ul>
</div>

     

CSS

/* humberger menu */
#humberger-menu {
  position: fixed;
  top: 24px;
  right: 20px;
  width: 40px;
  height: 32px;
  z-index: 3;
}
#humberger-menu span {
  position: absolute;
  width: 40px;
  height: 4px;
  background: #333;
} 
.line-1 {
  top: 0;
}
.line-2 {
  top: 14px;
}
.line-3 {
  top:28px;
}

/******* /drop menu *******/
.drop-menu {
  display: none;
}

jQuery

$(function() {

  $('#humberger-menu').on('click', function() {
    $(this).toggleClass('open');

    if($(this).hasClass('open')) {
  $('.line-2').css({
        opacity: '1',
        transition: 'all 0.4s' 
      });
      $('.line-1').css({
        transform: 'rotate(0) translate(0, 0)' ,
        transition: 'all 0.4s' 
      });
      $('.line-3').css({
        transform: 'rotate(0) translate(0, 0)',
        transition: 'all 0.4s' 
      });
    } else {
      $('.line-2').css({
        opacity: '0',
        transition: 'all 0.4s' 
      });
      $('.line-1').css({
        transform: 'rotate(45deg) translate(3px, 15px)' ,
        transition: 'all 0.4s' 
      });
      $('.line-3').css({
        transform: 'rotate(-45deg) translate(3px, -15px)',
        transition: 'all 0.4s' 
      });
    }
    
    $(this).next('.drop-menu').slideToggle('slow');
  });
});

試したこと

１．一番下のコード（ $(this).next('.drop-menu').slideToggle('slow');）の位置を変えてみた（もともとは上から３行目にあった）。

２．$('#humberger-menu').click(function()　を
$('#humberger-menu').on('click', function() に変えてみた。

どなたかどうかよろしくお願いいたします。

Comments

[m.ts10806]

cssもご提示ください

[hayamin1111]

失礼しました。追加いたしました。

Answer 1

ifとelseの中身逆では？
toggleクラスでopen追加してるから、最初のクリックでifの中身の処理走ってますよ。

Comments

[hayamin1111]

とんだ勘違いをしていました！お恥ずかしい。
ありがとうございました！無事解決しました。

[zushi0905]

すごくお節介かもしれませんが、ifとelseを入れ替えると条件式のopenクラスを持っていたら(空いていたら)空いている状態のアイコンにするとなってしまい、コードの文脈がおかしくなる感じがしました。

今更ですが、$(this).toggleClass('open');を下に条件文の処理後に持ってくる方が文脈的に自然かも知れません。

[hayamin1111]

ほお！なるほど！確かにその順番の方が自然ですね！ありがとうございます！

Answer 2

ifの中身逆にすると良い感じに動くように見えます。

Comments

[m.ts10806]

ちょっと遅かった。

[hayamin1111]

すみません・・・。でも端的な回答をありがとうございます！

[m.ts10806]

「理由」まであったほうが後から読んだ人には参考になるので、
BAの回答が正ですね。