Question

我已经建立了一个下拉列表，但无法弄清楚如何关闭下拉列表。

目前它只是显示为开放状态。

我希望它做的是表现得像正常的下拉。单击以打开，单击下拉列表或在占位符中关闭。

非常感谢您的帮助。

此致最大

这是标记：

double

这是css：

                               <li class="options">
                                <input type="text" name="locations" placeholder="Preferred Locations" required/>
                                <ul>
                                    <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option1</label></li>
                                    <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option2</label></li>
                                    <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option3</label></li>
                                </ul>
                                <div class="bottom"></div>
                            </li>

Answer 1

试试这个小提琴： https://jsfiddle.net/phy2ztee/

这是HTML：

<div id="dropdown" class="options" style="display:none">

    <input type="text" name="locations" placeholder="Preferred Locations" required="required">
   <ul>
        <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option1</label></li>
       <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option2</label></li>
        <li><input type="checkbox" class="checkbox" name="locations_op"><label>Option3</label></li>
   </ul>
</div>
<div id="clickme">Click Me!</div>

但是，您需要手动将下拉列表放在您想要的位置。

例如

#dropdown {
    position: absolute;
    left:100px;
}

或类似的东西。如果您需要帮助定位，请发表评论。

如果您想要更流畅的动画，请发表评论。现在它会淡入淡出。

下拉复选框打开和关闭

1 个答案: