jQuery ハンバーガーメニュー 最初しか動かない

Question

jQueryでハンバーガーメニューを作っています。
三本線のアイコンをクリックして、項目をクリックして表示させるところまでは出来るのですが、そのあと三本線のアイコンをクリックしようとしても出来ないです。
何故なのでしょうか。

codepen

<header>
  <div class="headerbox">
    <a href="#top" class="selected"><img src="https://dotup.org/uploda/dotup.org2578489.png_iLuABy5Oslq1Kq8AAhTb/dotup.org2578489.png"></a>
    <img src="https://dotup.org/uploda/dotup.org2578486.png_m0xB0l61O3dkbNtLnKvU/dotup.org2578486.png" class="threeline">
  </div>
  <nav>
    <ul>
      <li><img src="https://dotup.org/uploda/dotup.org2578577.png_VX9bKenwSxVVrY0Gt9on/dotup.org2578577.png" class="cross"></li>
      <li><a href="#aaa">aaa</a></li>
      <li><a href="#bbb">bbb</a></li>
      <li><a href="#ccc">ccc</a></li>
    </ul>
  </nav>
</header>

<section id="top">
  <div>
  <p>topだよ〜</p>
  </div>
</section>

<section id="aaa">
  <div>
  <p>aaaだよ〜</p>
  </div>
</section>

<section id="bbb">
  <div>
  <p>bbbだよ〜</p>
  </div>
</section>

<section id="ccc">
  <div>
  <p>cccだよ〜</p>
  </div>
</section>

div.headerbox {
  background-color: pink;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

header nav {
  background-color: black;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0;
}

header nav ul {
  line-height: 3;
  list-style: none;
}

header nav a {
  color: white;
}

header nav ul li:first-child {
  text-align: right;
}

header nav ul li {
  border-bottom: 1px solid white;
}

  $('header div.headerbox img.threeline').click(function(){
    $('header nav').animate({
      top: 0
    },300);
  });

  $('header  nav ul li img.cross').click(function(){
    $('header nav').animate({
      top: '-100%'
    },300);
  });

  var selected_panel = $('header div.headerbox a.selected').attr('href');

  $('section:not('+selected_panel+')').hide();

  $('header a').click(function(){
    $('header div.headerbox a.selected').removeClass('selected');
    $(this).addClass('selected');
    $('header nav').hide();
    $('section').hide();
    $($(this).attr('href')).show();
    return false;
  });

Answer 1

$('header a').click(function() が実行されると、$('header nav').hide();が実行され、そのままになっているからだと思います。
まずは仮に$('header div.headerbox img.threeline').click(function()に$('header nav').show();を入れて強制的に表示してください。それだけでは解決しないと思いますが、あとは考えてみてください。

Comments

[yukarichang]

>>$('header nav').hide();が実行され、そのままになっているからだと思います。
謎が解けました。hide()ではなくpositionで位置を見えないところへ持っていくことで解決しました。ありがとうございました。