避免失去專注於選擇

我有一個小高度的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/

來源

2013-06-19 abimelex

你想什麼時候最小化？如果你希望它保持開放，你將不得不使用javascript來改變div.formcontainer – Precastic

的css屬性，就像在CSS中一樣，當.formcontainer裏面沒有任何元素有焦點，活動或懸停 – abimelex

，但它是這樣做的。 ..我使用Firefox和它正在工作。只有當我點擊一個我想避免的選擇項目 – Precastic

這是一個CSS唯一的解決辦法：

#field2-A4318 { 
    display: none; 
} 

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

只要保持它的簡單。無需搗亂高度和溢出元素。

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

來源

2013-06-19 06:36:26

添加此jQuery代碼確實神奇：

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

Have a look

來源

2013-06-19 06:19:22 Bhavik

看起來不錯，但我認爲我需要添加一個計時器以最大限度地減少它再次自動... – abimelex

避免失去專注於選擇

回答

相關問題