0

ユーザーがアイコンをクリックしたときに、より多くのHTMLをWebサイトに表示できるようにするJavaScriptを探しています。私は初めてのモバイルデザインに取り組んでおり、html、css、javascriptを使用してプロトタイプを作成しています。これが私がこれまでに持っているものです：http：//www.patthorntonfiles.com/snk_mobile

ユーザーが上部の検索アイコンをクリックすると、検索ボックスが表示されます。jqueryアコーディオン効果などは必要ありません。ユーザーがアイコンをもう一度クリックするか、検索を押すと、HTMLが表示されてから消えるだけです。

何が素晴らしいかを調べるためのコードまたはライブラリに関する推奨事項。コードを教えてもらう必要はありませんが、Google検索で探しているものが正確に表示されません。

4

3 に答える 3

7

jQuery以外のソリューションは次のとおりです。

document.getElementById("identifier").style.setProperty("visibility", "hidden");

と

document.getElementById("identifier").style.setProperty("visibility", "visible");
于 2012-11-23T22:31:11.023 に答える
0

jQueryアコーディオン効果を使用したくないとおっしゃっていましたが、jQueryを使用して不透明度をアニメーション化していますか？下記を参照してください。

$("#idClicked").click(function() {
   $("#searchBox").fadeTo("fast", 1);
});
于 2012-11-23T22:30:15.193 に答える
-2

jQueryのhide（）とshow（）は、まさにそれを実行します（これらにはアコーディオン効果はなく、装飾なしで表示および非表示になります）。

$('#HtmlId').hide();
$('#HtmlId').show();

さらに、toggle（）を取得して、表示されている場合は非表示にし、非表示の場合は表示します。

$('#HtmlId').toggle();

----編集----コメントを読んだ後、あなたがhtmlを持っていると想像してください：

<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>

そして、非表示/表示するdivは次のとおりです。

<div id="search"> <gcse:search></gcse:search> </div>

次に、コールバック関数がトグルを実行して、クリックイベントを画像にバインドします。

$("#hideShowIcon").click(function() {
    $('#search').toggle();
});

-----編集2-----

あなたのサイトを見ましたが、ドキュメント準備機能がありません。基本的には次のようになります。

$(document).ready(function() {
  $("#hideShowIcon").click(function() {
        $('#search').toggle();
  });
 });

これを追加しない場合、jQueryはアクションをまだ存在しない要素にバインドしようとします。

于 2012-11-23T22:28:45.043 に答える