个人中心
gpt4 book ai didi

javascript - 在下拉列表中显示元素 - JavaScript/HTML

转载 作者：行者123 更新时间：2023-11-27 23:38:25 25 4
gpt4 key购买 nike

我在显示下拉列表中的元素时遇到问题，里面有复选框，当我单击箭头显示元素时，它会在第一个下拉列表中显示元素，但是当我在第二个下拉列表中加载时，我有两个下拉列表它显示了从上面掉落的元素。谁能帮我这个？谢谢!

这是我的 HTML 代码:

    <!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>

这是我的 CSS:

    .dropdown-check-list {
    display: inline-block;
}
.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}
.dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
}
.dropdown-check-list ul.items li {
    list-style: none;
}

这是我的 javascript 函数:

    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";
        }
    }
}

最佳答案

如下更改您的 javascript 函数:

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";
    }

};

并更新您的 HTML 代码:

...
<ul id="list1_items" class="items">
...
...
<ul id="list2_items" class="items">
...

这是一个JSFiddle

关于javascript - 在下拉列表中显示元素 - JavaScript/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32784284/

25 4 0
文章推荐： c++ - 避免并发等待对象中的死锁
文章推荐： c++ - 为什么 [[nodiscard]] 只鼓励编译器发出警告而不要求它？
文章推荐： css - 背景不走封面大小bootstrap 4
文章推荐： c++ - 电位器与第二个arduino板的通信状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com