Javascript &引用；商店「；可折叠菜单的实际状态

我为一个朋友建立了一个网站，但现在我面临着一个基于js/css的垂直和可折叠菜单的问题。每次我点击其中的一个链接，新页面就会被加载，整个菜单就会再次折叠。我试图找到一种方法来实际“存储”公开的信息，但迄今为止失败了。我甚至想在加载的子页面上添加一些“触发器”来告诉菜单应该“打开”哪个部分。。。希望有人能在这方面帮助我

作为一个警告，我不太习惯用html/php/js编写代码，所以请尝试用新手可能理解的方式解释可能的解决方案：-）

到目前为止，我的代码是：

Javascript:

    $(document).ready(function() {

    // Collapse everything but the first menu:
    $("#VerColMenu > li > a").not("").find("+ ul").slideUp(1);

    // Expand or collapse:
    $("#VerColMenu > li > a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});

CSS:

#VerColMenu，#VerColMenu ul
{
列表样式：无；
宽度：15em；
}
#维科拉菜单
{
颜色：#ffffff；
显示：块；
字体大小：粗体；
填充物：0.5em 1em；
文字装饰：无；
左边框：12px实心#711515；
右边框：1px实心#711515；
边框底部：1px实心#711515；
背景：#000000；/*旧浏览器*/
背景：-moz线性梯度（左，#0000001%，#8f0222 56%，#a90329 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（1%，#000000）、颜色停止（56%，#8f0222）、颜色停止（100%，#a90329））；/*铬、Safari4+*/
背景：-webkit线性梯度（左，#0000001%，#8f0222 56%，#a90329 100%）；/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，#0000001%，#8f0222 56%，#a90329 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（左，#0000001%，#8f0222 56%，#a90329 100%）；/*IE10+*/
背景：线性梯度（向右，#0000001%，#8f0222 56%，#a90329 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#000000'，endColorstr='#a90329'，GradientType=1）；/*IE6-9*/
}
#维科鲁拉
{
颜色：#ffffff；
字体大小：正常；
文字装饰：下划线；
背景：#a90329；/*旧浏览器*/
背景：-moz线性梯度（左，#a90329 0%，#8f0222 44%，#000000 99%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#a90329）、颜色停止（44%、#8f0222）、颜色停止（99%、#000000））；/*铬、Safari4+*/
背景：-webkit线性梯度（左，#a90329 0%，#8f0222 44%，#000000 99%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（左，#a90329 0%，#8f0222 44%，#000000 99%）；/*Opera 11.10+*/
背景：-ms线性梯度（左，#a90329 0%，#8f0222 44%，#000000 99%）；/*IE10+*/
背景：线性梯度（向右，#a90329 0%，#8f0222 44%，#000000 99%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#a90329'，endColorstr='#000000'，GradientType=1）；/*IE6-9*/
}
#Vercolul a:悬停
{
背景：#ffffff；
文字装饰：下划线；
颜色：#000000；
} 

Index.PHP上的HTML/PHP（菜单内链接将显示的内容块部分）：

submenu.php（称为inside index.php）：

对于这种情况，我用于存储布尔值。所有主流浏览器都支持它。我想这对你有用

您的代码可能是这样工作的：

$(document).ready(function() {

    // Collapse everything but the first menu:
    if (localStorage.getItem("menuopen") !== true) {
        $("#VerColMenu > li > a").not("").find("+ ul").slideUp(1);
    }

    // Expand or collapse:
    $("#VerColMenu > li > a").click(function() {
        var menu = true;

        if (localStorage.getItem("menuopen") === true) {
            menu = false;
        }

        localStorage.setItem("menuopen", menu);

        $(this).find("+ ul").slideToggle("fast");
    });
});

---

此解决方案避免了应用程序上的结构更改，如使用Ajax或用于内容加载。我希望这会有所帮助。

如果您正在构建此网站，我认为更好的方法是以一种方式构建它，即不必在每次导航时都重新加载包含菜单的整个页面。使用AJAX或frames只更新页面的相关部分。@MarcellFülöp我不敢相信你建议OP使用frames@哈哈，我也很惊讶：）但从技术上来说，它是可行的，而且仍然有效。信不信由你，有些网站甚至使用它。@MarcellFülöp Flash或Silverlight在技术上也是可行的，有些网站仍然使用它，但你会使用它吗？我不认为在OP的情况下，只有打开/关闭状态才应该被记住，而是全树状态，也就是说，什么是开放的，什么是封闭的，这是一个多层次的树导航。@MarcellFülöp是的，你可能是对的，但他可以在这方面采取一些方向，现在这取决于他。我不该做他所有的工作，谢谢你！我只是试着把它放进去，但由于某种原因，我不能在点击时再展开任何内容。我错过什么了吗？“menuopen”是来自某个地方还是在jquery中预定义的？@hunepa与jquery无关。“menuopen”是在localStorage上存储布尔值的键。请阅读我的相关文章

<div class="content">
                <p>
                <?php
                    $page = $_GET['page'];
                    # !! add all pages to the array !!
                    $pages = array('welcome', 'delivery', 'contact', 'impress', 'about', 'terms', );
                    if (!empty($page)) {
                        if(in_array($page,$pages)) {
                            $page .= '.php';
                            include($page);
                        }
                        else {
                        echo 'Page not found. Return to
                        <a href="index.php">index</a>';
                        }
                    }
                    else {
                        include('welcome.php');
                    }
                ?>
                </p>
        </div>

<ul id="VerColMenu">
<li><a title="Click to open or close this section" href="#">Bekleidung</a>
    <ul>
        <li><a href="index.php?page=tshirts">T-Shirts</a></li>
        <li><a href="index.php?page=girlies">Girlie-Shirts</a></li>
        <li><a href="index.php?page=longs">Longsleeves</a></li>
        <li><a href="index.php?page=hoodies">Kapuzenpullover</a></li>
        <li><a href="index.php?page=hoodiejackets">Kapuzenjacken</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Bekleidungs-Accesoires</a>
    <ul>
        <li><a href="index.php?page=labels">Kleidungs- & Wasch-Etiketten</a></li>
        <li><a href="index.php?page=coverband">Abdeckband für Nähte</a></li>
        <li><a href="index.php?page=zipper_puller">Reißverschluß-Zughilfe</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Kopf-, Hals- und Armbedeckung</a>
    <ul>
        <li><a href="index.php?page=caps">Caps</a></li>
        <li><a href="index.php?page=beanies">Beanies</a></li>
        <li><a href="index.php?page=scarves">Schals</a></li>
        <li><a href="index.php?page=bandanas">Bandanas</a></li>
        <li><a href="index.php?page=sweatbands">Schweißbänder</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Einlassarmbänder</a>
    <ul>
        <li><a href="index.php?page=alu">Stoffarmbänder mit Alu-Plombe</a></li>
        <li><a href="index.php?page=plastic">Stoffarmbänder mit Kunststoffverschluss</a></li>
        <li><a href="index.php?page=control_pvc">Kunststoffbänder</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Aufnäher / Patches</a>
    <ul>
        <li><a href="index.php?page=wovenpatch">Gewebte Aufnäher</a></li>
        <li><a href="index.php?page=embroiderypatch">Gestickte Aufnäher</a></li>
        <li><a href="index.php?page=backpatch">Bedruckte Rückenaufnäher</a></li>
        <li><a href="index.php?page=embroiderykeychain">Gestickte / Gewebte Schlüsselanhänger</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Accesoires</a>
    <ul>
        <li><a href="index.php?page=dogtags">Dog Tags</a></li>
        <li><a href="index.php?page=lanyard">Schlüsselbänder / Lanyards</a></li>
        <li><a href="index.php?page=keychain">Schlüsselanhänger</a></li>
        <li><a href="index.php?page=wallet">Geldbörsen</a></li>
        <li><a href="index.php?page=billholder">Mappen mit Prägung</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Banner & Flaggen</a>
    <ul>
        <li><a href="index.php?page=backdrop">Backdrop-Banner</a></li>
        <li><a href="index.php?page=combanner">Werbebanner</a></li>
        <li><a href="index.php?page=posterflag">Poster Flag</a></li>
        <li><a href="index.php?page=beachflag">Beachflag / Segel</a></li>
        <li><a href="index.php?page=aframe">A-Frame / Dreieck</a></li>
        <li><a href="index.php?page=rollup">Roll Up</a></li>
        <li><a href="index.php?page=golfflag">Golf Fahne</a></li>
    </ul>
</li>
 <li><a title="Click to open or close this section" href="#">Giveaways</a>
    <ul>
        <li><a href="index.php?page=bannerpen">Banner-Kugelschreiber</a></li>
        <li><a href="index.php?page=teepeg">Golftees</a></li>
        <li><a href="index.php?page=reflarm">reflektierende Armbänder</a></li>
        <li><a href="index.php?page=reflector">reflektierende Anhänger</a></li>
        <li><a href="index.php?page=bags">Taschen</a></li>
        <li><a href="index.php?page=lanyard2">Schlüsselbänder / Lanyards</a></li>
        <li><a href="index.php?page=keychain2">Schlüsselanhänger</a></li>
    </ul>
</li>
 <li><a title="Click to open or close this section" href="#">Sicherheitsprodukte</a>
    <ul>
        <li><a href="index.php?page=reflarm2">reflektierende Armbänder</a></li>
        <li><a href="index.php?page=reflector2">Reflektoren</a></li>
        <li><a href="index.php?page=reflvest">Sicherheitswesten</a></li>
        <li><a href="index.php?page=refljack">Sicherheitsjacken</a></li>
        <li><a href="index.php?page=reflshirt">Sicherheits-T-Shirts</a></li>
    </ul>
</li>
<li><a title="Click to open or close this section" href="#">Anstecknadeln / Pins</a>
    <ul>
        <li><a href="index.php?page=button">Buttons</a></li>
        <li><a href="index.php?page=pin">Pins</a></li>
    </ul>
</li>

$(document).ready(function() {

    // Collapse everything but the first menu:
    if (localStorage.getItem("menuopen") !== true) {
        $("#VerColMenu > li > a").not("").find("+ ul").slideUp(1);
    }

    // Expand or collapse:
    $("#VerColMenu > li > a").click(function() {
        var menu = true;

        if (localStorage.getItem("menuopen") === true) {
            menu = false;
        }

        localStorage.setItem("menuopen", menu);

        $(this).find("+ ul").slideToggle("fast");
    });
});