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>

开/关复选框示例：

<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>

默认情况下，所有选项都被选中，因为我希望所有菜单标题都可见。从这里我想在本地存储中存储对复选框的任何更改，如果他们决定关闭按钮，那么 .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

您也可以使用 cookie 代替 localstorage，然后在服务器端脚本上根据 cookie 值相应地设置隐藏/检查属性。这样，您将不会在隐藏元素之前获得元素的闪光，这可能在 JavaScript 中发生。

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

于 2013-08-02T18:47:35.677 回答
0

这是另一种方法，使用数组，朋友帮我弄清楚。

演示：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));
}
于 2013-08-05T18:35:34.843 回答