Question

我在一个高度较小的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/

Answer 1

添加这个jQuery代码真有效：

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

Have a look

Answer 2

这是仅CSS解决方案：

#field2-A4318 {
    display: none;
}

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

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

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

避免专注于选择

2 个答案: