0

私は4つの要素を持つフォームを作成しようとしています。1つはチェックボックスのドロップダウンボックスで、もう1つは単純なチェックボックスです。私はそれらを上下に配置しようとしています。難しいのは、チェックボックスのあるドロップダウンをクリックすると、もう一方のドロップダウンが下にスライドすることです。チェックボックスでドロップダウンを閉じると、再び上にスライドします。チェックボックスのあるドロップダウンをクリックすると、もう一方が単に非表示になり、下にスライドしないように、それらを上下に配置しようとしています。チェックボックスのドロップダウンを閉じると、残りのドロップダウンが表示されます。誰かがこれについて私を助けてくれませんか。私は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>
4

2 に答える 2

0

css-codeを追加して、ScrollCountry-block要素を通常の要素フローの外側に配置する必要があります。

position: absolute;

それに。

于 2012-08-27T14:37:40.460 に答える
0

意味があり、動作が優れているため、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>
于 2012-08-27T15:03:17.380 に答える