我目前正在制作一个共享烹饪食谱的网页。我试图使用幻灯片菜单隐藏一些菜单选项。基本上我想要做的是显示一个包含所有食物类别的菜单作为可点击链接。当用户单击其中一个链接时，将显示带有子类别的幻灯片菜单。我能够显示幻灯片菜单，但如果用户点击其他菜单类别则不会更改。如何在用户点击其他类别时更改幻灯片菜单？
感谢您的帮助。这是我的代码：
HTML File:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC-"//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Name: Collin Klopstein
Date: December 14, 2013
filename: dinnerplate.htm
supporting files: dinner.css, menus.js
description: A web site created to let people share their love for cooking, post favorite recipes, share tips, and learn about cooking. The site consists of several links to link the users to specific recipes for breakfast, lunch and dinner, as well as recipes organized by food groups and dietary concerns. The menus.js file will use javascript to place the links into a simple menu system that will not overwhelm the web page. The dinner.css will style the Web Page.
-->
<title>Dinner Menu</title>
<link type="text/css" rel="stylesheet" href="dinner.css">
<script type="text/javascript" src="menus.js"></script>
</head>
<body>
<div id="page">
<div id="left">
<h3>Assignments</h3>
<ul class="assignmentLinks">
<li><a href="index.htm">Index</a></li>
<li><a href="birthday.htm">Happy Birthday</a></li>
<li><a href="dinnerplate.htm">Dinner Plate</a></li>
<li><a href="tempest.htm">Shakespeare</a></li>
</ul>
<hr style="color: white" />
<h3>Menu</h3>
<ul class="menu">
<li class="categories"><a href="#">Home</a></li>
<li class="slideMenus"><a href="#">Appetizers</a>
<ul>
<li><a href="#">Antipasto</a></li>
<li><a href="#">Seafood</a></li>
<li><a href="#">Beans and Legumes</a></li>
<li><a href="#">Canapes</a></li>
<li><a href="#">Cheeses</a></li>
<li><a href="#">Dips and Spreads</a></li>
<li><a href="#">Fruits</a></li>
<li><a href="#">Meat</a></li>
<li><a href="#">Nuts and Seeds</a></li>
<li><a href="#">Pastries</a></li>
<li><a href="#">Vegetables</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">Breakfast/Brunch</a>
<ul>
<li><a href="#">Baked Goods</a></li>
<li><a href="#">Beverages</a></li>
<li><a href="#">Casseroles</a></li>
<li><a href="#">Cereals</a></li>
<li><a href="#">Fruits</a></li>
<li><a href="#">Meat</a></li>
<li><a href="#">Potatoes</a></li>
<li><a href="#">Quiches</a></li>
<li><a href="#">Crepes</a></li>
<li><a href="#">Egg Dishes</a></li>
<li><a href="#">French Toast</a></li>
<li><a href="#">Pancakes</a></li>
<li><a href="#">Waffles</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">Desserts</a>
<ul>
<li><a href="#">Cakes</a></li>
<li><a href="#">Candies</a></li>
<li><a href="#">Chocolate</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Custards and Puddings</a></li>
<li><a href="#">Gelatins</a></li>
<li><a href="#">Pies</a></li>
<li><a href="#">Frozen Treats</a></li>
<li><a href="#">Meringues</a></li>
<li><a href="#">Mousse</a></li>
<li><a href="#">Trifles</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">Main Dishes</a>
<ul>
<li><a href="#">Burgers</a></li>
<li><a href="#">Casseroles</a></li>
<li><a href="#">Fish and Seafood</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Meatless</a></li>
<li><a href="#">Meatloaves</a></li>
<li><a href="#">Pizza and Calzones</a></li>
<li><a href="#">Quiche</a></li>
<li><a href="#">Ribs</a></li>
<li><a href="#">Roasts</a></li>
<li><a href="#">Sandwiches</a></li>
<li><a href="#">Steaks and Chops</a></li>
<li><a href="#">Stir-Fries</a></li>
<li><a href="#">Stuffed Peppers</a></li>
<li><a href="#">Mexican</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">Salads</a>
<ul>
<li><a href="#">Bean</a></li>
<li><a href="#">Coleslaw</a></li>
<li><a href="#">Croutons and Toppings</a></li>
<li><a href="#">Dressings and Vinaigrettes</a></li>
<li><a href="#">Egg Salads</a></li>
<li><a href="#">Fruit Salads</a></li>
<li><a href="#">Grains</a></li>
<li><a href="#">Green Salads</a></li>
<li><a href="#">Pasta Salads</a></li>
<li><a href="#">Potato Salads</a></li>
<li><a href="#">Vegetable Salads</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">Soups</a>
<ul>
<li><a href="#">Beans and Legumes</a></li>
<li><a href="#">Broths and Stocks</a></li>
<li><a href="#">Chili</a></li>
<li><a href="#">Chowders</a></li>
<li><a href="#">Cream and Cheese</a></li>
<li><a href="#">Dessert Soups</a></li>
<li><a href="#">Dry Soup Mixes</a></li>
<li><a href="#">Noodle Soups</a></li>
<li><a href="#">Seafood</a></li>
<li><a href="#">Slow Cooker Soups</a></li>
<li><a href="#">Stews</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Vegetarian</a></li>
</ul>
</li>
<li class="slideMenus"><a href="#">User</a>
<ul>
<li><a href="#">Post a Recipe</a></li>
<li><a href="#">Discussion Forum</a></li>
<li><a href="#">My Profile</a></li>
<li><a href="#">My Recipe Book</a></li>
</ul>
</li>
</ul>
</div>
<div id="logo">
<img src="dplogo.jpg" alt="Dinner Plate" />
</div>
<div id="main">
<img src="torte.jpg" height="300" width="320"alt="Apple Bavarian Torte" />
<h1>Recipe of the Week</h1>
<h2>Apple Bavarian Torte</h2>
<h3>Ingredients:</h3>
<ul id="ingrd">
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoom vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h3>Directions</h3>
<ol id="dir">
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan.</li>
</ol>
<div id="summer">
<h3>Summer Entertainment Tips</h3>
<p>With the summer fast approaching, it's time to start planning outdoor parties. Keep your guests cool and happy with the summer time tips.</p>
<ul class="tips">
<li>Keep plenty of ice on hand for cooling people, food, and drinks by filling plastic freezer bags with ice from your trays.</li>
<li>For extra flavor, use frozen cubes of lemonade or juice to cool drinks instead of regular ice.</li>
<li>Keep a bag packed with picnic gear for spur-of-the-moment excursions.</li>
<li>Throw a summer harvest party to swap surplus fruits and vegetables with your gardener friends.</li>
<li>Stock extras for guests including sunblock, bug repellant, hats, and towels</li>
</ul>
</div>
<div id="grill">
<h3>Grilling Tips</h3>
<p>Is there anything better on the grill than beef? To get the most out of steaks, apply the following tips:</p>
<ul class="tips">
<li>For direct grilling place beef 3 to 6 inches from the heat source and cook at medium heat.</li>
<li>For thicker cuts, use indirect grilling with the beef placed farther that 6 inches from the heat source.</li>
<li>Leave at least 1/8" of fat in your steaks to help seal in the juices while the meat is cooking. Slash the fat at 1" intervals around the steak perimeter so that the meat willl not curl up during the grilling process.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JavaScript文件：
/*
Name: Collin Klopstein
Date: December 14, 2013
Filename: menus.js
Function List:
makeMenus()
Initializes the contents of the mystery.htm Web page, locating
the sliding menus, setting their initial positions and
display styles and defining the onevent handlers.
showSlide()
Shows a sliding menu while hiding any inactive menus
closeSlide()
Closes an inactive sliding menu
moveSlide()
Moves a sliding menu horizontally across the page
-------------------------------------------------------------
Global Variable List:
currentSlide
An object variable pointing to the currently active sliding menu
leftPos
The current left position of the sliding menu as it is
moved across the page
*/
window.onload = makeMenus;
var currentSlide = "null";
var leftPos = 0;
function makeMenus() {//create a reference to all sliding menus in the doc and apply event handlers
var slideMenus = new Array();//creates slideMenus array
var allElems = document.getElementsByTagName("*");//stores all elements in the document in allElems array
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "slideMenus") slideMenus.push(allElems[i]);
}
for (var i = 0; i < slideMenus.length; i++) {
slideMenus[i].onclick = showSlide;//creates eventhandler onclick to call showSlide()
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";//sets the left property value of ul elements to 0px
}
//create event handler onclick that calls the closeSlide() when a user clicks anywhere in the "logo" or "main" div
document.getElementById("logo").onclick = closeSlide;
document.getElementById("main").onclick = closeSlide;
document.getElementById("left").onclick = showSlide;
}
function showSlide() {//displays a sliding menu on the web page
var slideList = this.getElementsByTagName("ul")[0];
//test whether a sliding menu is currently displayed on the page
if (currentSlide != "null" && currentSlide.idName == slideList.idName)
closeSlide;
else {
closeSlide;
currentSlide = slideList;
currentSlide.style.display = "block";
currentSlide.style.backgroundColor = "black";
currentSlide.style.border = "2px solid rgb(218, 165, 32)";
currentSlide.style.left = "125px";
currentSlide.style.top = "-100px";
}
}
function closeSlide() {//close any active sliding menu
if (currentSlide) {
currentSlide.style.left = "0px";//sets style of left property to 0px of currentSlide object
currentSlide.style.display = "none";//sets display of currentSlide to "none"
currentSlide = "null";//sets value of currentSlide to "null"
}
}
function moveSlide() {//move a sliding menu horizontally across page until left coordinate exceeds 220
leftPos += 5;
if (parseInt(currentSlide.style.left) <= 220)
currentSlide.style.left = leftPos + "px";
else {
leftPos = 0;
}
}
CSS：
body {background-color: black}
ul {list-style-type: none}
ul a {text-decoration: none; color: black}
#left {width: 150px; float: left; background-color: black; height: 100%;}
#left h3{text-align: center; font-weight: normal; letter-spacing: 0.25em;
font-size: 14px; color: white; margin-bottom: 15px}
#left li {position: relative; margin: 5px; padding-top: 0.5em}
#left a {color: rgb(218, 165, 32); text-decoration: underline; display: block}
#left a:hover {color: white; text-decoration: underline; font-weight: bold}
#left ul ul {display: none; position: absolute; top: 0px; left: 100%; width: 100%}
#left.slideMenu > a {z-index: 2; position: relative;}
#logo {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; margin-bottom: 15px; background-color: white}
#main {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; background-color: white;}
#main h1 {font-weight: normal; font-family: Script; letter-spacing: 0.5em; border: 1px solid black; background-color:
rgb(218, 165, 32); margin-right: 20px}
#main img {float: right; margin: 0px 0px 10px 10px; position: absolute; top: 325px; left: 925px; border: 25px inset
rgb(218,165,32)}
#main p {margin: 10px 0px; font-size: 1.25em; }
#main h2, h3 {text-decoration: underline}