我修改了一个我在网上找到的脚本，但我很难让它显示我想要的方式。我不知道如何修改脚本来完成以下任务。
当网页打开时，只显示：
Click on links below to find the mayor of your city
States
当用户点击“状态”时，只显示：
Select a State
Alabama
Texas
California
当用户点击Alabama时，只显示以下内容：
Select a City
Birmingham
Auburn
Montgomery
当用户点击伯明翰时，只有以下显示：
The mayor of Birmingham Alabama is William Bell
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Click on links below to find the mayor of your city</b></p>
<p id="demo" onclick="myFunction('myDIV')">States</p>
<div id="myDIV">
<p><b> Select a State</b></p>
<p id="demo" onclick="myFunction('myDIV2')">Alabama</p>
<p id="demo" onclick="myFunction(myDIV3')">Texas</p>
<p id="demo" onclick="myFunction(myDIV4')">California</p>
</div>
<div id="myDIV2">
<p><b>Select a City</b></p>
<p id="demo" onclick="myFunction('myDIV2A')">Birmingham</p>
<p id="demo" onclick="myFunction('myDIV2B')">Auburn</p>
<p id="demo" onclick="myFunction('myDIV2C')">Montgomery</p>
</div>
<div id="myDIV2A">
<p><b>The mayor of Birmingham Alabama is William Bell</b></p>
</div>
<script>
function myFunction(div) {
var x = document.getElementById(div);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
答案 0 :(得分：2)
我可以为您编写可以用于此的代码，但我认为您的目标是学习如何自己完成此操作，因此我将尝试解释此类代码中发生的情况，以及希望能让你理解你似乎缺乏这种类型的代码。首先，类是你可以拥有的很多， id 是你只能拥有的。
您的代码在许多行上都有一个id = demo，而这不是您可以做的事情。如果您有很多课程，则必须使用课程。 Id用于从其余部分中选择一个特定项目，因此ID必须始终是唯一的。但是，当您需要稍后从代码中的某个位置选择该特定项时，您只需要为该项指定一个id。
var myDiv = selectElementById("myUniqueDiv");
上面的实时代码将选择具有特定ID的特定div。 myDiv变量类似于现在持有div。
如果我说：
var allDivs = selectElemetnsByClassName("myDivs");
我可以选择具有特定类名的所有div。 allDivs变量有点像我所选择的所有元素的列表。
元素可以属于一个或多个clases，但只有一个元素可以使用特定的id。
当你在其他元素中选择元素时，就像div中的所有段落一样，你可以创建变量并先存储主div，然后你使用那个变量（它包含所有元素）来进一步选择在里面。
var citys = document.getElementById('citys'); // select main div
citys.getElementsByTagName("p"); // selecting all p elements in it
然后您可以将其设置为显示与否。首先，您可以设置要隐藏的所有元素，然后您只能显示其中一个被点击的元素。
citys.style.display = "none";
上面的行隐藏了从城市div中选择的所有p。
function myFunction(selectedCity){
document.getElementsById( selectedCity ).style.display = "block";
}
这最后一行使用id来选择特定城市并使其可见。 myFunction（）声明中括号中的内容，这里我选择了City，它变成了一个变量，它保存了调用函数时所提供的内容。我用它来选择我想要显示的城市。
建议：我会使用下拉列表，而不是隐藏和取消隐藏元素。
我希望这足以让您了解如何自行编写此类代码。
答案 1 :(得分：0)
你没有隐藏div，所以它是如何被隐藏的。
你可以做以下两件事之一：
编写CSS以隐藏元素。在head标签内写这个样式属性就可以了。
<style>
#myDIV, #myDIV2, #myDIV2A{
display: none;
}
</style> 您可以在声明时立即调用该函数，并使用要隐藏的div的ID
<script></script>function myFunction(div) { var x = document.getElementById(div); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } myFunction('myDIV'); myFunction('myDIV2'); myFunction('myDIV2A');
答案 2 :(得分：0)
我不建议这样做，但似乎你处于学习的早期阶段，所以我会用它来推动它。
让我先说明你的html无效，你有重复的元素ID，请修复它。
在我提供的演示中，我们添加了一个名为＆＃34; initialHide＆＃34;的初始类。在我们的css文件中，我们将其设置为displey：none。这最初将收集所有级联选项。
然后我们更改您的onclick调用以接受2个参数，因为我们不仅需要知道我们要显示的内容，还需要知道当用户做出选择时需要隐藏的所有子选项。例如：如果用户更改状态，那么我们需要隐藏最后一个选择的城市和最后一个选择的市长。如果用户只更改了一个城市，那么我们只需要隐藏最后一个选择的市长。
我们将为父div添加一个描述性类名，以便我们的js可以定位这些元素。当js被调用时，我们将决定我们需要隐藏什么，按类名选择元素数组，迭代并隐藏它们。然后我们将在之后展示我们的目标选择。
function myFunction(div, hide) {
if (hide === "state") {
var cities = document.getElementsByClassName("city");
for (var i = 0; i < cities.length; i++) {
cities[i].style.display = "none";
}
var mayors = document.getElementsByClassName("mayor");
for (var i = 0; i < mayors.length; i++) {
mayors[i].style.display = "none";
}
} else {
var mayors = document.getElementsByClassName("mayor");
for (var i = 0; i < mayors.length; i++) {
mayors[i].style.display = "none";
}
}
var x = document.getElementById(div);
if (x.style.display = 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}.initialHide {display:none;}<p><b>Click on links below to find the mayor of your city</b></p>
<p id="demo">States</p>
<div id="myDIV">
<p><b> Select a State</b></p>
<p id="demo1" onclick="myFunction('myDIV2', 'state')">Alabama</p>
<p id="demo2" onclick="myFunction('myDIV3', 'state')">Texas</p>
<p id="demo3" onclick="myFunction('myDIV4', 'state')">Tenneessee</p>
</div>
<div id="myDIV2" class="initialHide city">
<p><b>Select a City</b></p>
<p id="demo4" onclick="myFunction('myDIV2A', 'city')">Birmingham</p>
<p id="demo5" onclick="myFunction('myDIV2B', 'city')">Auburn</p>
<p id="demo6" onclick="myFunction('myDIV2C', 'city')">Montgomery</p>
</div>
<div id="myDIV3" class="initialHide city">
<p><b>Select a City</b></p>
<p id="demo7" onclick="myFunction('myDIV3A', 'city')">Dallas</p>
<p id="demo8" onclick="myFunction('myDIV3B', 'city')">Houston</p>
<p id="demo9" onclick="myFunction('myDIV3C', 'city')">Austin</p>
</div>
<div id="myDIV4" class="initialHide city">
<p><b>Select a City</b></p>
<p id="demo10" onclick="myFunction('myDIV4A', 'city')">Memphis</p>
<p id="demo11" onclick="myFunction('myDIV4B', 'city')">Nashville</p>
<p id="demo12" onclick="myFunction('myDIV4C', 'city')">Knoxville</p>
</div>
<div id="myDIV2A" class="initialHide mayor">
<p><b>The mayor of Birmingham Alabama is William Bell</b></p>
</div>
<div id="myDIV2B" class="initialHide mayor">
<p><b>The mayor of Auburn Alabama is Smitty McSmitt</b></p>
</div>
<div id="myDIV2C" class="initialHide mayor">
<p><b>The mayor of Montgomery Alabama is Monty McMontFace</b></p>
</div>
<div id="myDIV3A" class="initialHide mayor">
<p><b>The mayor of Dallas TX is awdeqdweqd</b></p>
</div>
<div id="myDIV3B" class="initialHide mayor">
<p><b>The mayor of Houston TX is awdeqdweqvswwsd</b></p>
</div>
<div id="myDIV3C" class="initialHide mayor">
<p><b>The mayor of Austin TX is Monty McMontFace</b></p>
</div>
<div id="myDIV4A" class="initialHide mayor">
<p><b>The mayor of Memphis TN is William Bell</b></p>
</div>
<div id="myDIV4B" class="initialHide mayor">
<p><b>The mayor of Nashville TN is Smitty McSmitt</b></p>
</div>
<div id="myDIV4C" class="initialHide mayor">
<p><b>The mayor of Knoxville TN is Monty McMontFace</b></p>
</div>
答案 3 :(得分：0)
我们在您的代码中有一些问题需要解决，但不要担心，这很容易！
首先，请检查以下行：
var x = document.getElementById(div);
.getElementById（）函数将查找id为“div”的元素，但代码中没有id =“div”的div。你有id =“demo”的div，id =“myDiv”的div，id =“myDiv2”的div和id =“myDiv2A”的最后一个div。 由于您没有任何具有您要查找的ID的元素，因此最终结果将是错误，因为在此行中：
if (x.style.display === 'none') {
您将检查X的值，但X等于 null ，因为未返回任何元素。 要解决此问题，请将var x = document.getElementById（ div ）中的 div 替换为所需的ID。请记住，你应该将一个字符串传递给函数，所以即使id真的是 div ，它也应该在引号之间，例如.getElementById（“div”）; < / p>
第二次，你从未隐藏过你的div！当您启动代码时，您需要确保在其他任何内容之前隐藏它们。一种方法是使用CSS，但由于你没有提供任何CSS代码，我将在这里使用JavaScript，因为它也是可能的：
var hideDIV = document.getElementById("myDIV");
var hideDIV2 = document.getElementById("myDIV2");
var hideDIV2A = document.getElementById("myDIV2A");
hideDIV.style.display = "none";
hideDIV2.style.display = "none";
hideDIV2A.style.display = "none";
现在我们隐藏了所有的div！当您单击正确的链接时，它们将开始显示。
最后，我们有一个适用于第一个州和该州第一个城市的代码。只需复制其他div的逻辑就可以了：D
完整代码在这里工作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><b>Click on links below to find the mayor of your city</b></p>
<p id="demo" onclick="myFunction('myDIV')">States</p>
<div id="myDIV">
<p><b> Select a State</b></p>
<p id="demo" onclick="myFunction('myDIV2')">Alabama</p>
<p id="demo" onclick="myFunction(myDIV3')">Texas</p>
<p id="demo" onclick="myFunction(myDIV4')">California</p>
</div>
<div id="myDIV2">
<p><b>Select a City</b></p>
<p id="demo" onclick="myFunction('myDIV2A')">Birmingham</p>
<p id="demo" onclick="myFunction('myDIV2B')">Auburn</p>
<p id="demo" onclick="myFunction('myDIV2C')">Montgomery</p>
</div>
<div id="myDIV2A">
<p><b>The mayor of Birmingham Alabama is William Bell</b></p>
</div>
<script type="text/javascript">
var hideDIV = document.getElementById("myDIV");
var hideDIV2 = document.getElementById("myDIV2");
var hideDIV2A = document.getElementById("myDIV2A");
hideDIV.style.display = "none";
hideDIV2.style.display = "none";
hideDIV2A.style.display = "none";
function myFunction(div) {
var x = document.getElementById(div);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>