Question

我有一个带有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匹配的菜单项。

Answer 1

这是一个有效的演示：http://jsfiddle.net/VcGjx/ 请注意，它使用的是jQuery并运行onDomReady

您也可以使用cookie而不是localstorage，然后在服务器端脚本中根据cookie值相应地设置hidden / checked属性。这样，在隐藏可能发生的JavaScript之前，您将无法获得元素的闪存。

编辑：要使用自举开关，您需要使用更改事件而不是单击，因为它是单击的开关而不是复选框。 http://jsfiddle.net/ukrb3/5/

Answer 2

这是另一种方法，使用数组，朋友帮我解决。

演示：http://jsfiddle.net/HrXp5/12/

HTML：

<ul id="menu">
    <li id="list0">Widgets</li>
    <li id="list1">Gadgets</li>
</ul>

<h3>Toggle Menu's</h3>

<ul id="menu-toggles">
    <li>Widgets:
        <button type="button" id="toggle0" data-menuhead="list0" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
    <li>Gadgets:
        <button type="button" id="toggle1" data-menuhead="list1" class="btn btn-primary menu-toggle" data-toggle="button">On</button>
    </li>
</ul>

JS：

var menu_storage_key = 'menu_items_off';
var menu_items_off = new Array();

if ('localStorage' in window && window['localStorage'] !== null) {
    var storage = window.localStorage;
}

$(document).ready(function() {
    $('.menu-toggle').click(function () {
        if ($(this).html() == 'On') {
            $(this).html('Off');
            if(menu_items_off.indexOf($(this).data('menuhead')) < 0) {
                menu_items_off.push($(this).data('menuhead'));
            }
        } else {
            $(this).html('On');
            $('#' + $(this).data('menuhead')).show();
            var new_array = new Array();
            if(menu_items_off.indexOf($(this).data('menuhead')) >= 0) {
                for (i=0; i < menu_items_off.length; i++) {
                    if(menu_items_off[i] != $(this).data('menuhead')) {
                        new_array.push(menu_items_off[i]);
                    }
                }
                menu_items_off = new_array;
            }
        }
        persist_data(menu_storage_key, menu_items_off);
        update_menu();
    });

    // running on document load
    load_menu_storage();
    update_menu();
    update_toggles();
});

function load_menu_storage() {
    // check to see if value exists
    if(storage.getItem(menu_storage_key) == null) {
        // if it doesn't exist, set it to empty array and return
        persist_data(menu_storage_key, new Array());
        return;
    }
    menu_items_off = get_data(menu_storage_key);
}

function update_menu() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('#' + menu_items_off[i]).hide();
    } 
}

function update_toggles() {
    // value exists, iterate through and set items off
    for (i=0; i < menu_items_off.length; i++) {
        $('.menu-toggle').each(function() {
            if(menu_items_off[i] == $(this).attr('data-menuhead')) {
                $(this).html('Off');
                $(this).addClass('active');
            }
        });
    }
}

function persist_data(key, data) {
    storage.setItem(key, JSON.stringify(data));
}

function get_data(key) {
    return JSON.parse(storage.getItem(key));
}

使用localstorage和复选框自定义菜单

2 个答案: