在下拉列表中显示元素-JavaScript/HTML
我在显示下拉列表中的元素时遇到问题，我在下拉列表中有复选框，当我单击箭头显示元素时，它会在第一个下拉列表中显示元素，但当我在第二个下拉列表中加载时，它会从上方显示下拉列表中的元素。有人能帮我吗？谢谢 以下是我的HTML代码：在下拉列表中显示元素-JavaScript/HTML,javascript,html,css,Javascript,Html,Css,我在显示下拉列表中的元素时遇到问题，我在下拉列表中有复选框，当我单击箭头显示元素时，它会在第一个下拉列表中显示元素，但当我在第二个下拉列表中加载时，它会从上方显示下拉列表中的元素。有人能帮我吗？谢谢 以下是我的HTML代码： <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template fi
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="cascade.css">
<script type="text/javascript" src="pesquisas.js"></script>
<title>Pesquisa de Imóveis</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>
<div id="list1" class="dropdown-check-list" tabindex="1"><!--"dropdown-check-list"-->
<span class="anchor" onclick="getElements('list1')">Anúncio</span><!--"anchor"-->
<ul id="items" class="items">
<li><input type=checkbox name=faceta1 value=valor1>Aluguer</input></li>
<li><input type=checkbox name=faceta1 value=valor2>Venda</input></li>
<li><input type=checkbox name=faceta1 value=valor3>Compra</input></li>
<li><input type=checkbox name=faceta1 value=valor4>Permuta</input></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div id="list2" class="dropdown-check-list">
<span class="anchor" onclick="getElements('list2')">Imóveis</span>
<ul id="items" class="items">
<li><input type=checkbox name=faceta2 value=valor1>Apartamento</input></li>
<li><input type=checkbox name=faceta2 value=valor2>Moradia</input></li>
<li><input type=checkbox name=faceta2 value=valor3>Armazém</input></li>
<li><input type=checkbox name=faceta2 value=valor4>T4</input></li>
<li><input type=checkbox name=faceta2 value=valor5>Terreno</input></li>
<li><input type=checkbox name=faceta2 value=valor6>Loja</input></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
...
<ul id="list1_items" class="items">
...
...
<ul id="list2_items" class="items">
...
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById('items');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
}
else {
items.classList.add('visible');
items.style.display = "block";
}
}
}
两个列表都有相同的id，这是无效的，并解释了为什么总是切换相同的列表。通过使用event.target和querySelector，您可能会简化很多操作
<span class="anchor" onclick="toggle()">text</span>
var toggle = function toggle( event ) {
var list = event.target.querySelector('.items');
if (list.classList.contains('visible')) {
list.classList.remove('visible');
list.style.display = "none";
}
else {
list.classList.add('visible');
list.style.display = "block";
}
}
文本
变量切换=功能切换（事件）{
var list=event.target.querySelector（'.items'）；
if（list.classList.contains（'visible'））{
list.classList.remove（'visible'）；
list.style.display=“无”；
}
否则{
list.classList.add（'visible'）；
list.style.display=“block”；
}
}
function getElements(list) {
var checkList = document.getElementById(list);
var items = document.getElementById(list + '_items');
if (items.classList.contains('visible')) {
items.classList.remove('visible');
items.style.display = "none";
} else {
items.classList.add('visible');
items.style.display = "block";
}
};
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="cascade.css">
<script type="text/javascript" src="pesquisas.js"></script>
<title>Pesquisa de Imóveis</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>
<div id="list1" class="dropdown-check-list" tabindex="1"><!--"dropdown-check-list"-->
<span class="anchor" onclick="getElements('list1')">Anúncio</span><!--"anchor"-->
<ul id="items" class="items">
<li><input type=checkbox name=faceta1 value=valor1>Aluguer</input></li>
<li><input type=checkbox name=faceta1 value=valor2>Venda</input></li>
<li><input type=checkbox name=faceta1 value=valor3>Compra</input></li>
<li><input type=checkbox name=faceta1 value=valor4>Permuta</input></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div id="list2" class="dropdown-check-list">
<span class="anchor" onclick="getElements('list2')">Imóveis</span>
<ul id="items" class="items">
<li><input type=checkbox name=faceta2 value=valor1>Apartamento</input></li>
<li><input type=checkbox name=faceta2 value=valor2>Moradia</input></li>
<li><input type=checkbox name=faceta2 value=valor3>Armazém</input></li>
<li><input type=checkbox name=faceta2 value=valor4>T4</input></li>
<li><input type=checkbox name=faceta2 value=valor5>Terreno</input></li>
<li><input type=checkbox name=faceta2 value=valor6>Loja</input></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
...
<ul id="list1_items" class="items">
...
...
<ul id="list2_items" class="items">
...
。。。
...
...
...
这是一个为什么你说我的列表有相同的id？我为这两个drop分配了不同的id，drop1=list1 drop2=list2，然后我通过参数传递了id。您有错误吗？请向我解释为什么要将单击事件添加到列表中，因为我不明白您在使用
检查表.getElementsByClassName（'anchor'）[0].onclick=- 元素具有相同的id，并且由于您正在按id选择列表，getElementById将始终返回第一个
- 元素。在您的代码中，我收到一个错误：“Uncaught TypeError:无法读取未定义的属性'target'”