[解決済み] 右から検索トグル
2022-02-09 16:12:02
質問
ブートストラップ上で右側からのシンプルな検索トグルを実現しようとしています。問題は、ボタンがダブルクリックされたときにクリックが発生し、検索入力がすぐに消えてしまうことです。
私が実現しようとしているのは、ボタンをクリックすると、同じボタンをクリックしたときにdivの開閉を切り替える必要があるということです。
https://codepen.io/shahil/pen/XjdYdg
$(".search-btn").click(function () {
$(".search-input-elm").animate({ width: 'toggle' });
$(".search-input-elm").toggle();
});
.search { position:relative; }
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;}
.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; }
.search .search-input{
width: 100%;
background: #fff;
color:#222;
border: 0;
padding: 6px 10px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.search-submit {
position: absolute;
top: 3px;
right: 10px;
}
.search .search-btn:focus, header .search .search-input:focus { outline:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="search">
<div class="search-wrap">
<div class="search-input-elm">
<input class="search-input" type="text" placeholder="search.." />
<button class="search-submit">></button>
</div>
<button class="search-btn">Search BUTTON</button>
</div>
</div>
解決方法は？
削除する
$(".search-input-elm").animate({ width: 'toggle' });
をjsから削除してください。
$(".search-btn").click(function () {
$(".search-input-elm").animate({ width: 'toggle' });
});
.search { position:relative; }
.search .search-input-elm { position:absolute; top:10px; right: 37px; display: none; width: 175px;}
.search .search-btn {background:transparent;border:0;margin-top: 9px; float:right; }
.search .search-input{
width: 100%;
background: #fff;
color:#222;
border: 0;
padding: 6px 10px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.search-submit {
position: absolute;
top: 3px;
right: 10px;
}
.search .search-btn:focus, header .search .search-input:focus { outline:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="search">
<div class="search-wrap">
<div class="search-input-elm">
<input class="search-input" type="text" placeholder="search.." />
<button class="search-submit">></button>
</div>
<button class="search-btn">Search BUTTON</button>
</div>
</div>
関連
-
[解決済み】jQueryでクリックされた要素のIDを取得する方法
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] Vimeoのコントロールを非表示にする方法
-
[解決済み] 3桁ごとの数字にカンマを追加
-
[解決済み] jquery autocomplete が動作しない
-
[解決済み] jQuery Mobileのボタンを無効にする
-
[解決済み] jQueryを使ってドロップダウンリスト（セレクトボックス）から選択されたテキストを取得する
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] jQuery ドロップダウンから選択されたオプションを取得する
-
[解決済み] フレックスアイテムを右寄せにするには？
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン