1

デフォルトでdisplay:noneに設定されているスライドアウトパネルを使用しています。トリガーをクリックすると、クラスが「アクティブ」に切り替わります。これにより、トリガーにスプライトの位置から来る赤い x (閉じる) が表示されます。

$(document).ready(function(){
$(".info-panel-left-trigger").click(function(){
 $("#info-panel-left").toggle(400);//switching between display and display:none
 $(this).toggleClass("active");
 return false;
});

}); これは私が持っているものですが、今私が欲しいものが来て、おそらくあなたの1人がこれを達成する方法を知りました.
パネルをデフォルトで表示するか、デフォルトで非表示にするオプションを作成したいと思います。トグルはそれに応じて動作するはずです。これは、デフォルトでパネルを表示することを選択した場合、x スプライトの位置を表示するためにトグルを「アクティブ」に設定する必要があることを意味します。デフォルトでパネルを非表示にすることを選択した場合、+ スプライトの位置を表示するには、トグルを「非アクティブ」に設定する必要があります。

私は自分自身を十分に明確にしたことを願っています。HELP 大変お世話になりました。

編集あなたたちは正しいです。もう少し説明が必要です。できるだけ短くしたかったのですが、もう少し...

私は Web サイト テンプレートを作成しています。テンプレートの購入者は、情報目的でこれらのパネルを含めることができるはずです。デフォルトでは、パネルを表示するように設定し、トリガー クラスを「アクティブ」に設定する必要があります。これは、閉じるために私の小さな x を表示します。
ただし、テンプレートの購入者が追加のクラス「非表示」をパネル マークアップに追加する場合、パネルはデフォルトで非表示にする必要があり、トリガーをアクティブに設定しないでください。その場合、トリガーはこのパネルを開くために小さな + を表示するためです。今私のアイデアを得ましたか？

4

1 に答える 1

1

このデフォルトをどこに (そしてどの程度永続的に) 保存しますか? そのセッションのクライアントだけですか、それともサーバー側ですか? サーバー側は私にとって最も論理的だと思われます..そうであれば、ユーザーがパネルを表示することを選択したときに、info-panel-left の html にクラスを追加します。次にあると仮定すると

<div id="info-panel-left" class="shown"></div>

JavaScript を少し追加して、読み取れるようにします

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'shown' ) ) {
        infoPanel.show();
        infoPanelTrigger.addClass( 'active' );
    }
    ... etc ...

（もちろん、「アクティブ」クラスも使用できます）

編集：わかりました。JS の部分だけに固執すれば、アプローチはあまり変わらないと思いますよね。逆にするだけです：

<div id="info-panel-left" class="hide"></div>

それから

$(document).ready(function(){
    var infoPanel = $( '#info-panel-left' );
    var infoPanelTrigger = $( '.info-panel-left-trigger' );

    if ( infoPanel.hasClass( 'hide' ) ) {
        infoPanel.hide();
        infoPanelTrigger.removeClass( 'active' );
    }
    ... click trigger, toggle etc ...
于 2010-10-15T11:05:16.907 に答える