画像をクリックでオンオフ切り替えたい

Question

###前提・実現したいこと
・#btn をクリックすると、画像が _off.png から _on.png に切り替わり、.glovalNavi をを表示させる
→ 再び#btn をクリックすると、画像が _on.png から _off.png に切り替わり、.glovalNavi を隠す

上記挙動を組みたいのですが、画像を何度も切り替える方法がわかりませんでした。
（オフ状態からオンにはいけるものの、オンからオフに戻らない）
何か簡単な方法をご存知でしたらお教えいただけると助かります。

###HTML

<div class="hoge">
 <ul>
  <li id="btn"><img src="btn_off.png"></li>
 </ul>
</div>
<div class="glovalNavi">
 <ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
 </ul>
</div>

###JavaScript

$(function(){
 $('#btn').on('click', function(){
  $('.glovalNavi').stop().slideToggle();
 $('#btn img').attr('src','/btn_on.png');
  return false;
 });
})

###CSS

.glovalNavi{
 position: absolute;
 z-index: 1;
 display: none;
}

Answer 1

いちおう読んだまま書きます

<script>
$(function(){
  $('.glovalNavi').hide();
  $('#btn img').on('click',function(){
    var reg=new RegExp('^(.+_)(off|on)(\.png)$');
    if(r=$(this).attr('src').match(reg)){
      $(this).attr('src',r[1]+(r[2]=='off'?'on':'off')+r[3]);
      $('.glovalNavi').toggle(r[2]=='off');
    }
  })
});
</script>
<div class="hoge">
 <ul>
  <li id="btn"><img src="btn_off.png"></li>
 </ul>
</div>
<div class="glovalNavi">
 <ul>
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
 </ul>
</div>

Comments

[a2s]

ありがとうございます！

Answer 2

方法はいろいろありますが。
とりあえず自分ならこうします。

_on,_offとクラスを作って

$('#btn').on('click',function(){
  if($(elm).hasClass('_on')){
    $(elm).removeClass('_on').addClass('_off');
    //onのときの処理
    $('#btn img').attr('src','/btn_off.png');
    $('.glovalNavi').css({display:'block'});
  }else{
    $(elm).removeClass("_off").addClass('_on');
    //offのときの処理
    $('#btn img').attr('src','/btn_on.png');
    $('.glovalNavi').css({display:'none'});
  }
})

↓こんなかんじ。
https://jsfiddle.net/meu6bcct/1/

たぶんもっときれいに書けるはず。

追記
{display:'none'}と{display:'display'}をそれぞれClass化してremove/addClassしてもいいと思う。

Comments

[a2s]

ありがとうございます！

Answer 3

$(function(){
 $('#btn').on('click', function(){
  $('.glovalNavi').stop().slideToggle();
  $('.glovalNavi').toggleClass("on");
  if($('.glovalNavi').hasClass("on")){
   $('#btn img').attr('src','btn_on.png');
  }else{
   $('#btn img').attr('src','btn_off.png');
  }
  return false;
 });
})

画像のパスは適宜合わせてください。
「on」というクラスの有無でどちらの画像を表示するか切り替えています。
色々考慮しないといけないパターンはあると思いますがその辺は調整してみてください。

Comments

[a2s]

ありがとうございます！無事こちらの記述で動作しました。
一番早かったので、koronatailさんをBAにいたします。