Question

我有这个问题，无法通过。我需要在下拉列表中显示选项，但我没有成功。它只显示下拉列表，当我点击它时不会显示选项。如果有人可以请求帮助，将不胜感激。谢谢！

这是我的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>

Answer 1

将此添加到您的Javascript代码：

$(".dropdown").on("click",function()
{
    $(this).addClass("is-active");
});

在下拉列表中显示带复选框的选项 - HTML / JAVASCRIPT

1 个答案: