我对此有疑问，无法通过。 我需要在下拉列表中显示选项，但我没有成功。 它只出现下拉菜单，当我单击它时不显示选项。如果有人可以提供帮助，我们将不胜感激。谢谢!
这是我的 HTML 代码和 CSS:
.dropdown {
width: 100px;
border: 1px solid black;
cursor: pointer;
/* use correct mouse pointer when hovering over the dropdown */
padding: 10px;
position: relative;
margin: 0 auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Display CSS arrow to the right of the dropdown text */
.dropdown:after {
content: '';
height: 0;
position: absolute;
width: 0;
border: 6px solid transparent;
border-top-color: #000;
top: 50%;
right: 10px;
margin-top: -3px;
}
/* Reverse the CSS arrow when the dropdown is active */
.dropdown.is-active:after {
border-bottom-color: #000;
border-top-color: #fff;
margin-top: -9px;
}
.dropdown-list {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
/* align the dropdown right below the dropdown text */
border: inherit;
border-top: none;
left: -1px;
/* align the dropdown to the left */
right: -1px;
/* align the dropdown to the right */
opacity: 0;
/* hide the dropdown */
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
pointer-events: none;
/* avoid mouse click events inside the dropdown */
}
.is-active .dropdown-list {
opacity: 1;
/* display the dropdown */
pointer-events: auto;
/* make sure that the user still can select checkboxes */
}
.dropdown-list li label {
display: block;
border-bottom: 1px solid silver;
padding: 10px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.dropdown-list li label:hover {
background-color: #c41230;
color: white;
}
EDIT: Full html code<!DOCTYPE html>
<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="tab1" class="dropdown" tabindex="1">
<!--"dropdown-check-list"-->
<span>Anúncio</span>
<!--"anchor"-->
<ul class="dropdown-list">
<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 class="dropdown">
<span>Imóveis</span>
<ul class="dropdown-list">
<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>最佳答案
将此添加到您的 Javascript 代码中:
$(".dropdown").on("click",function()
{
$(this).addClass("is-active");
});
关于javascript - 在下拉列表中显示带有复选框的选项 - HTML/JAVASCRIPT，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32772300/