Question

我正在尝试这个例子：http://jqueryui.com/selectmenu/

JSFiddle中的

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

但是selectmenu大约是jqueryui示例页面上显示的 height 的两倍。如何更改选择菜单的高度？我试过高度，填充，边距，字体大小。似乎没有什么能改变它。

Answer 1

那是因为jQuery selectmenu创建了一个由div和spans组成的自定义选择。隐藏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>

Jquery选择菜单高度

1 个答案: