我为 friend 建立了一个网站，但现在我遇到了基于 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:
<!-- jq Menu -->
#VerColMenu, #VerColMenu ul
{
list-style : none;
width : 15em;
}
#VerColMenu a
{
color : #ffffff;
display : block;
font-weight : bold;
padding : 0.5em 1em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
border-bottom: 1px solid #711515;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 1%, #8f0222 56%, #a90329 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#000000), color-stop(56%,#8f0222), color-stop(100%,#a90329)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 1%,#8f0222 56%,#a90329 100%); /* IE10+ */
background: linear-gradient(to right, #000000 1%,#8f0222 56%,#a90329 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#a90329',GradientType=1 ); /* IE6-9 */
}
#VerColMenu ul a
{
color : #ffffff;
font-weight : normal;
text-decoration: underline;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 44%, #000000 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(99%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #a90329 0%,#8f0222 44%,#000000 99%); /* IE10+ */
background: linear-gradient(to right, #a90329 0%,#8f0222 44%,#000000 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
#VerColMenu ul a:hover
{
background : #ffffff;
text-decoration: underline;
color : #000000;
}
Index.php 上的 HTML/PHP(菜单内链接将显示的内容 block 的一部分):
<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>
submenu.php(在 index.php 中调用):
<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>
最佳答案
对于这种情况，我使用 localStorage存储一个 bool 值。这是supported所有主要浏览器。我认为它对您有用。
你的代码可能是这样工作的:
$(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 或 frames用于内容加载。希望对您有所帮助。
关于javascript - "store"折叠菜单的实际状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19856506/