CSS，HTML格式的格式

Question

我一直在尝试创建一个包含下拉列表中的复选框的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>

Answer 1

您应该在下拉列表中放置一个position: absolute ”。 这样，您打开/关闭了另一个下拉菜单，不会影响另一个下拉菜单。

Answer 2

代替使用display属性，而是使用visibility属性（visibility = visible | hidden）。 不管是否显示，都将保留DIV所需的空间。

修改后的版本在这里的的jsfiddle。

CSS，HTML格式的格式

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-08-26 16:42:36

解决方案2
0 2012-08-26 16:43:22

CSS，HTML格式的格式

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-08-26 16:42:36

解决方案2 0 2012-08-26 16:43:22

解决方案1
1 已采纳 2012-08-26 16:42:36

解决方案2
0 2012-08-26 16:43:22