jQuery的選擇菜單高度

Question

我想這個例子：http://jqueryui.com/selectmenu/

中的jsfiddle：https://jsfiddle.net/3b1htdfr/5/

$(function() { 
$("#number") 
    .selectmenu() 
    .selectmenu("menuWidget") 
    .addClass("overflow"); 
}); 

但selectmenu是關於高度是jQueryUI的示例頁面上顯示雙。如何更改選擇菜單的高度？我嘗試過高度，填充，邊距，字體大小。沒有什麼似乎改變它。

Answer 1

這是因爲jQuery selectmenu創建一個由div和span構成的自定義選擇。您的原始選擇與id=number隱藏。

您需要將您的類添加到新創建菜單的相關部分;

• 您單擊讓菜單下拉的部分被稱爲「按鈕」
• 那滴下來，並擁有所有列表中的項目被稱爲「菜單」

的一部分

$(function() { 
 
    $("#number").selectmenu(); 
 
    $("#number").data("ui-selectmenu").button.addClass("SelectButton") 
 
    $("#number").data("ui-selectmenu").menu.addClass("SelectMenu"); 
 
});

.SelectButton { 
 
    width: 200px !important; 
 
    font-size: 12px !important; 
 
    color: red !important; 
 
} 
 
.SelectMenu { 
 
    width: 200px !important; 
 
    font-size: 10px !important; 
 
    color: blue !important; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<span> 
 
    <select name="number" id="number"> 
 
     <option>1</option> 
 
     <option selected="selected">2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
     <option>6</option> 
 
     <option>7</option> 
 
     <option>8</option> 
 
     <option>9</option> 
 
     <option>10</option> 
 
     <option>11</option> 
 
     <option>12</option> 
 
     <option>13</option> 
 
     <option>14</option> 
 
     <option>15</option> 
 
     <option>16</option> 
 
     <option>17</option> 
 
     <option>18</option> 
 
     <option>19</option> 
 
    </select> 
 
</span>