Sass と jQuery を使用してトグル ボタンを作成するには?

Sass と jQuery を使用したトグル ボタンの作成

クリック時の状態を維持するトグル ボタンを作成したい場合は、次のようにします。 CSS だけを飛び越える必要があります。

セマンティックなアプローチ

推奨されるアプローチは、チェックボックスを使用し、チェックされた状態に応じてスタイル設定することです。ただし、これには追加の要素と複雑さが伴う可能性があります。

jQuery ソリューション

より効率的な方法は、さまざまなボタンの状態に jQuery と 2 つの背景イメージを使用することです。

HTML:

<code class="html"><a id="button" title="button">Press Me</a></code>

JS:

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

CSS:

<code class="css">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;
}</code>

この jQuery 関数は、クリックされたときにボタンの「ダウン」クラスを切り替えます。 CSS クラスは、各状態の背景画像と境界線のスタイルを定義します。

以上がSass と jQuery を使用してトグル ボタンを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。