jQuery:toggleで交互にアクションを変更する

harada 46views 更新:2016年8月31日

jQueryのtoggleを利用すると表示・非表示を簡単に切り替えることができます。
今回はそれにあわせて、内包するフォームの値も切り替えたいと思い調べたところ、以下のようにすることで実現することができました。

HTML例

<a href="#tab2" class="btn-on">これをクリックすると</a>
<div id="tab">
このブロックの表示・非表示が切り替わる
<select id="check" name="check" class="hidden">
<option value="">選択してください</option>
<option value="りんご">りんご</option>
<option value="みかん" selected="selected">みかん</option>
</select>
</div>

JavaScript例

$(".btn-on").toggle(function(){
          $('#tab').fadeTo('fast',1,function(){
            $(this).show();
            $("#check").val('りんご');
          });
        },function(){
          $('#tab').slideDown().fadeTo('fast',0,function(){
            $(this).hide();
            $("#check").val('みかん');
          });
});

参考:要素を表示した時と非表示にした時にそれぞれ別のアクションを実行する方法

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません