1. ホーム
  2. jquery

[解決済み] トグルボタンを作成する方法を教えてください。

2022-03-04 19:27:48

質問

htmlでcssを使ってトグルボタンを作りたいのですが、どうすればいいですか?クリックすると押し込まれたままになり、もう一度クリックすると飛び出すようにしたいのですが。

もし、CSSだけでは無理だとしたら。jQueryを使用して行う方法はありますか?

どのように解決するのですか?

セマンティックな方法としては、チェックボックスを使用し、チェックされている場合とされていない場合で異なる方法でスタイルを設定するのがよいでしょう。しかし、そのための良い方法はありません。スパンやディボを追加したり、javascriptを追加したりしなければなりません。

そこで、最良の解決策は、小さなjQuery関数と2つの背景画像を使って、ボタンの2つの異なるステータスをスタイリングすることです。例として、ボーダーによる上下のエフェクトを使用しています。

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

もちろん、ボタンアップとボタンダウンを表現する背景画像を追加し、背景色を透明にすることもできます。