JavaScriptで検索バーの表示・非表示を制御しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、検索バーの表示・非表示の制御方法を学びましょう。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

開発

ページの作成

最初にページの作成をしましょう。index.htmlに次のコードを記述してください。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルをstyle.cssに記述してきましょう。

ここまで実装すると以下のようになります。

検索バーは、スタイルでボタンの裏側に隠しているみたいですね。

個人的に要素の中央寄せについて気になったので、別記事にしました。

JavaScriptの実装

さて、いよいよJavaScriptを実装しましょう。

styleに設定した「.active」クラスを「searchクラスがついている要素」に付与すると要素が表示されます。

要素を取得する

JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。

クリックイベントの登録

次にボタンのクリックイベントの登録を行います。

これでOKです。簡単ですね。

以前作ったアプリでは、要素の付け替えに「add/remove」メソッドを使っていましたが、今回は「toggle」を使っています。これだけでイベント発生毎にactiveクラスを付け替えしてくれます。

おわりに

これ、サイトで見たことあるやつ!」という感じのやつでしたね!目から鱗で勉強になります。

それと同時に、CSSの知識があればもっと面白いアプリケーションを個人で開発できるようになると実感しました。

今はgolangのサーバーサイド実装に集中してますが、それが落ち着いたらCSSも勉強してみようと思います。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す