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