javascript - id下自定义selectmenu jquery

标签 javascript jquery html css

我选择了使用 jquery-ui

$(function() {
  $("#number")
    .selectmenu()
    .selectmenu("menuWidget")
    .addClass("overflow");
});
fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

.overflow {
  height: 200px;
}

.ui-menu-item{
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="number">Select a number</label>
<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>

片段不工作,所以这里是 fiddle 链接

https://jsfiddle.net/vgm3txh6/8/

当我这样设置类时,一切都很好

.ui-menu-item{ font-weight: bold; }

但是当我需要在特定的 id 下使用它时,例如像这样

> #number.ui-menu-item{
  font-weight: bold;
}

我不应用样式。

我的问题在哪里?

最佳答案

您的 id=number 不是 ui-menu-item 类的父级。 但是 id=number-menu 是。

由于 > 是父选择器,您需要使用下面给出的数字菜单,

#number-menu > .ui-menu-item{
  font-weight: bold;
}

在这里解决:https://jsfiddle.net/vgm3txh6/41/

关于javascript - id下自定义selectmenu jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49717261/

相关文章:

带有表格而不是文本的 Javascript 弹出窗口(leafletjs 示例)

javascript - Mapbox-gl-directions 事件不会触发

javascript - AngularJS - ng-model 不适用于 Bootstrap 指令

javascript - 我的快速解析设置有什么问题?

用于选择的 JavaScript/Jquery 事件,其中 onchange 在执行操作后将选择恢复为默认值

html - 垂直 CSS 多级菜单,将自身定位在 div 的顶部,而不是第一个菜单选项的位置

javascript - jQuery 如何在父节点上使用额外的选择条件?

javascript - 将滚动限制在 div [jQuery、javascript、HTML] 的 y 位置

javascript - 如何围绕图像创建导航菜单

html - 表格问题 - 需要在同一表格上有两个不同的帖子。 - 我是一个完全的新手,一边学习一边学习