表单中的CSS、HTML格式

CSS,HTML formatting in a form

本文关键字：HTML 格式 CSS 表单      更新时间：2023-09-26

我一直在尝试创建一个由下拉列表中的复选框组成的HTML表单。我已经能够做这部分了。但当你点击一个特定的下拉列表时，剩下的下拉列表会向下移动。在第二次点击时，下拉列表会折叠，然后返回到原来的位置。请帮我纠正这个问题。如果复选框是否可见，我将尝试保持下拉列表的位置不变。

我试图实现的是类似于http://www.luxuryretreats.com/.感谢您的建议！

这是代码。

<html>
<head>
    <script type="text/javascript">
    function ExposeList1() {
        var showstatus = document.getElementById('ScrollCountry').style.display;
        if (showstatus == 'none') {
            document.getElementById('ScrollCountry').style.display = "block";
        } else {
            document.getElementById('ScrollCountry').style.display = 'none';
        }
    }
    function ExposeList2() {
        var showstatus = document.getElementById('Scrollguests').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollguests').style.display = "block";
        } else {
            document.getElementById('Scrollguests').style.display = 'none';
        }
    }
    function ExposeList3() {
        var showstatus = document.getElementById('Scrollminprice').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollminprice').style.display = "block";
        } else {
            document.getElementById('Scrollminprice').style.display = 'none';
        }
    }
    function ExposeList4() {
        var showstatus = document.getElementById('Scrollmaxprice').style.display;
        if (showstatus == 'none') {
            document.getElementById('Scrollmaxprice').style.display = "block";
        } else {
            document.getElementById('Scrollmaxprice').style.display = 'none';
        }
    }
</script>
</head>
<body>
    <form action="trying.php" method="post">
        <img src="original1.png" onmouseover="this.src='onhover1.png'"
            onmouseout="this.src='original1.png'" onclick="ExposeList1()">
        <div>
            <div id="ScrollCountry"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
                <input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
                <input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
                <input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
                <input type="checkbox" id="scb5" name="c5"
                    value="Turks &amp; Caicos">Turks &amp; Caicos<br>
                <br />
            </div>
        </div>

        <img src="original2.png" onmouseover="this.src='onhover2.png'"
            onmouseout="this.src='original2.png'" onclick="ExposeList2()">
        <div>
            <div id="Scrollguests"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
                <input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
                <input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
                <input type="checkbox" id="n4" name="n4" value="10">8 -
                10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
                <br />
            </div>
        </div>

        <img src="original3.png" onmouseover="this.src='onhover3.png'"
            onmouseout="this.src='original3.png'" onclick="ExposeList3()">
        <div>
            <div id="Scrollminprice"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="mn1" name="mn1" value="200">200<br>
                <input type="checkbox" id="mn2" name="mn2" value="300">300<br>
                <input type="checkbox" id="mn3" name="mn3" value="400">400<br>
                <input type="checkbox" id="mn4" name="mn4" value="500">500<br>
                <input type="checkbox" id="mn5" name="mn5" value="600">600<br>
                <br />
            </div>
        </div>
        <img src="original4.png" onmouseover="this.src='onhover4.png'"
            onmouseout="this.src='original4.png'" onclick="ExposeList4()">
        <div>
            <div id="Scrollmaxprice"
                style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
                <input type="checkbox" id="mx1" name="mx1" value="600">600<br>
                <input type="checkbox" id="mx2" name="mx2" value="700">700<br>
                <input type="checkbox" id="mx3" name="mx3" value="800">800<br>
                <input type="checkbox" id="mx4" name="mx4" value="900">900<br>
                <input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
            </div>
        </div>
        <input type="submit" />
    </form>
</body>
</html>

​

您应该在下拉列表中放一个position: absolute。这样，其他下拉列表就不会受到您打开/关闭另一个下拉列表的影响。

不要使用display属性，而是使用visibility属性（可见性=可见|隐藏）。这将保留DIV所需的空间，而不管是否显示。

jsfiddle上的修改版本。

相关文章：