local-storage 没有存储多个slideToggle的状态

Question

我想用 slideToggle 做一个多垂直菜单，并将切换状态存储在本地存储中，我不明白为什么不存储状态。

我发现这个例子（https://codepen.io/johnyrodni/pen/VVMXJx）有效，但是当我尝试将它传递给我的真正需求时（https://codepen.io/azyme/pen/PrGNpW）没有更多本地存储。

<div id="dropdown-1">

        <div class="heading">

      Click me

        </div>

            <ul class="content">

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

        </ul>

</div>

<div id="dropdown-2">

        <div class="heading">

      Click me

        </div>

            <ul class="content">

                <li><a href="#">Link</a></li>

                <li><a href="#">Link</a></li>

        </ul>

</div>

$(document).ready(function() {

    var openTabs = [];

    $(".content").hide();

    $(".heading").click(function(){

        var $this = $(this),

        selector = $this.parent().attr('id') + ' .heading';

        if ($(this).next('.content').is(':visible'))

        {

            var pos = openTabs.indexOf(selector);

            openTabs.splice(pos, 1);

        }

        else

        {

            openTabs.push(selector);

        }

        localStorage.openTabs = openTabs.join(',');

        $this.next(".content").slideToggle();

    });

    if (localStorage.openTabs)

        $(localStorage.openTabs).click();

});

我希望切换的状态将存储在本地存储中