0

メニューの項目を非表示または表示するかどうかを制御したい ON/OFF チェックボックスのある構成ページがあります。

メニュー セクションの例:

<ul class="accordion">
    <li id="whyReplace"><a href="#">header</a>
        <ul class="sub-menu">
            <li><a href="#"><em>01</em> sub1</a></li>
            <li><a href="#"><em>02</em> sub2</a></li>
            <li><a href="#"><em>03</em> sub3</a></li>
        </ul>
    </li>
</ul>

ON/OFF チェックボックスの例:

<div class="control-group">
    <div class="controls">
        <label class="checkbox">
            <div class="switch">
                 <input data-toggle-id="whyReplace" type="checkbox" checked />
            </div>
            Why should you replace?
         </label>
    </div>
</div>

すべてのメニューヘッダーを表示したいので、デフォルトではすべてがチェックされています。ここから、チェックボックスへの変更を localstorage に保存し、ボタンをオフにすることにした場合は、.hide(); を保存します。一致する data-toggle-id を使用した対応するヘッダー。

助けを求めてこのページを見ていましたが、必要なことの半分しかできません。

http://www.simonbingham.me.uk/index.cfm/main/post/uuid/using-html5-local-storage-and-jquery-to-persist-form-data-47

このプロジェクトでは、Phonegap と xcode を使用して iPad アプリとして公開していることを追加する必要があるため、Safari でテストしています。これらの保存された変数は、他のすべてのページでも永続的である必要があるため、どのボタンがオン/オフに切り替えられたかに基づいてメニューがカスタマイズされます。

次のようなものを使用します。

$(document).ready(function() {
    var storage = window.localStorage;
    for (var key in storage) {
        var menuhead = storage[key];
        if ($(menuhead).attr("checked") {
            $('li#' + menuhead).show();
        } else {
            $('li#' + menuhead).hide();
        }
    }
});

非表示にしたい（オフにした）チェックボックスをlocalstorageに保存し、それらの保存された変数をループしてから.hide（）;をループする方法を知る必要があります。ID が data-toggle-id と一致するメニュー項目。

4

2 に答える 2

0

ここに動作するデモがあります: http://jsfiddle.net/VcGjx/ jQuery を使用して実行されていることに注意してください。onDomReady

localstorage の代わりに Cookie を使用することもできます。その後、サーバー側のスクリプトで、Cookie の値に基づいて隠し/チェック済み属性を適宜設定します。そうすれば、JavaScript で発生する可能性のある要素が非表示になる前に、要素のフラッシュが発生することはありません。

編集：これをブートストラップスイッチで機能させるには、チェックボックスではなくスイッチがクリックされるため、クリックの代わりに変更イベントを使用する必要があります。http://jsfiddle.net/ukrb3/5/

于 2013-08-02T18:47:35.677 に答える