1

我在一个高度很小的 div 中有一个表单。在将 div 悬停时，它会展开并出现一个下拉选择器。有些下拉菜单项不在 div 区域中，当我单击它们时，div 会最小化。在下拉菜单中选择时，如何使 css/js 保持打开状态？在选择菜单中单击项目时，它不应最小化。

编辑：如果没有任何 css 解决方案，我也会接受 javascript / jquery。

HTML：

<div class="formcontainer">    
    <form>
        <span>hover me</span><br/>
        <select name="Type" id="field2-A4318">
            <option id="field2-1-A4318" value="1">Option 1</option>
            <option id="field2-2-A4318" value="2">Option 2</option>
            <option id="field2-3-A4318" value="3">Option 3</option>
            <option id="field2-4-A4318" value="4">Option 4</option>
            <option id="field2-4-A4318" value="5" selected="selected">Option 5</option>
        </select>
    </form>
</div>

CSS：

.formcontainer{
    width: auto;
    height: 20px;
    overflow: hidden;
    margin: 25px 10px 10px 20px;
    box-shadow: 0 0 20px rgba(100,100,100,0.2);
    border-bottom: 1px dashed #aaa;
}


.formcontainer:hover, .formcontainer:active, .formcontainer:focus{
    height: auto;
    min-height: 30px;
    border-bottom: 1px solid #eee;
}

http://jsfiddle.net/dCpa3/2/

4

2 回答 2

4

添加此 jQuery 代码会产生神奇的效果： 

$('#field2-A4318').click( function(){
    $('.formcontainer').css('min-height','30px');
    $('.formcontainer').css('height','auto');
});

看一看

于 2013-06-19T06:19:22.503 回答
3

这是一个仅限 CSS 的解决方案：

#field2-A4318 {
    display: none;
}

.formcontainer:hover #field2-A4318,
#field2-A4318:focus {
    display: block; 
}

保持简单。无需弄乱高度和溢出元素。

http://jsfiddle.net/dCpa3/10/

于 2013-06-19T06:36:26.113 回答