Question

我一直在尝试创建一个包含4个元素的表单。一个是复选框的下拉框，另一个是简单的复选框。我试图将它们放在另一个之下。难点在于单击复选框的下拉列表时，另一个下拉列表向下滑动。在使用复选框关闭下拉列表时，它们会再次向上滑动。我试图将它们放在另一个之下，这样如果单击复选框的下拉列表，则另一个简单地变为不可见而不会向下滑动。当复选框的下拉菜单关闭时，剩下的下拉菜单就会显示出来。有人可以帮我这个。我试图模仿像luxuryretreats.com上的过滤器那样的东西

以下是代码。

<html>
<head>
<script type="text/javascript">
function ExposeList1() {
    var showstatus = document.getElementById('ScrollCountry').style.visibility;
    if (showstatus == 'hidden') {
        document.getElementById('ScrollCountry').style.visibility = "visible";
        document.getElementById('Scrollguests').style.visibility = "hidden";
        document.getElementById('Scrollminprice').style.visibility = "hidden";
        document.getElementById('Scrollmaxprice').style.visibility = "hidden";
    } else {
        document.getElementById('ScrollCountry').style.visibility = 'hidden';
        document.getElementById('Scrollguests').style.visibility = "visible";
        document.getElementById('Scrollminprice').style.visibility = "visible";
        document.getElementById('Scrollmaxprice').style.visibility = "visible";
    }
}
</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 id="ScrollCountry"
            style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
            <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>
        </div>


<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2"  value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>

<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2"  value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>   
</div>

<br />      

<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>

Answer 1

您必须通过添加css代码将ScrollCountry-block元素放在正常的元素流之外：

position: absolute;

到它。

Answer 2

我将其更改为使用display而不是visibility，因为它更有意义且效果更好。由于#ScrollCountry现在位于复选框之上，因此无需再隐藏它们。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <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';
            }
        }
    </script>
    <style>
        fieldset{ border: 0; padding: 0; position: relative }
        #ScrollCountry{ 
            height: 120px; 
            width: 150px; 
            overflow: auto; 
            border: 2px solid orange;
            display:none;
            border-radius:10px;
            position: absolute;
            background: #fff;
        }
    </style>
</head>
<body>

    <form action="trying.php" method="post">
        <fieldset>
            <img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">

            <div id="ScrollCountry">
                <input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
                <input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
                <input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
                <input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
                <input type="checkbox" id="scb5" name="c5" value="Turks &amp; Caicos"><label for="scb5">Turks &amp; Caicos</label><br>
            </div>

            <div id="Scrollguests">
                <select>
                    <option id="n1" value="4">2 - 4</option>
                    <option id="n2"  value="6">4 - 6</option>
                    <option id="n3" value="8">6 - 8</option>
                    <option id="n4" value="10">8 - 10</option>
                    <option id="n5" value="30">10+</option>
                </select>
            </div>

            <div id="Scrollminprice">
                <select>
                    <option id="mn1" value="200">200</option>
                    <option id="mn2"  value="300">300</option>
                    <option id="mn3" value="400">400</option>
                    <option id="mn4" value="500">500</option>
                    <option id="mn5" value="600">600</option>
                </select>
            </div>

            <div id="Scrollmaxprice">
                <select >
                    <option id="mx1" value="600">600</option>
                    <option id="mx2" value="700">700</option>
                    <option id="mx3" value="800">800</option>
                    <option id="mx4" value="900">900</option>
                    <option id="mx5" value="1000">1000</option>
                </select>
            </div>
            <input type="submit">
        </fieldset>
    </form>

</body>
</html>

格式问题：复选框的DropDown

2 个答案: