javascript - 如何修复 jQuery mobile 子菜单中的标题

标签 javascript jquery css jquery-mobile

我对 jQuery 很陌生,无法解决以下问题:我有一个主菜单,单击主菜单会打开一个包含多个元素的子菜单。

<head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>
</head>
<div role="main" class="ui-content" style="background-color:#dae5f4;">
  <div class="ui-field-contain">
    <!-- ui-field-contain to wrap select elements -->
    <label for="items" class="select">Sub-Header</label> 
    <select id="items" name="items" size="1" data-native-menu="false">
      <option value="">Main-Header</option>
      <option value=1>Item 1</option>
      <option value=2>Item 2</option>
      <option value=3>Item 3</option>
      <option value=4>Item 4</option>
      <option value=5>Item 5</option>
      <option value=6>Item 6</option>
      <option value=7>Item 7</option>
      <option value=8>Item 8</option>
      <option value=9>Item 9</option>
      <option value=10>Item 10</option>
      <option value=11>Item 11</option>
      <option value=12>Item 12</option>
      <option value=13>Item 13</option>
      <option value=14>Item 14</option>
      <option value=15>Item 15</option>
      <option value=16>Item 16</option>
      <option value=17>Item 17</option>
      <option value=18>Item 18</option>
      <option value=19>Item 19</option>
      <option value=20>Item 20</option>
      <option value=21>Item 21</option>
      <option value=22>Item 22</option>
      <option value=23>Item 23</option>
      <option value=24>Item 24</option>
      <option value=25>Item 25</option>
      <option value=26>Item 26</option>
      <option value=27>Item 27</option>
      <option value=28>Item 28</option>
      <option value=29>Item 29</option>
      <option value=30>Item 30</option>
    </select>
  </div>
  <!-- end of div class=ui-field-contain -->
</div>
<!-- end of div role main -->

现在,我想修复子标题,使其不再与所有元素一起滚动。不幸的是,data-position="fixed" 不起作用。

最佳答案

你可以使用 CSS 来解决它。 如果你想限制弹出窗口的高度,使其在打开时不滚动,可以使用 max-height 的 60vh 或类似值,并设置垂直滚动。

.ui-selectmenu.ui-dialog .ui-content {
  max-height: 60vh;
  overflow-y: scroll;
}

为了修复它(如果需要),请添加以下 CSS:

#items-dialog {
  position: fixed;
  left: 0;
  top: 0;
}

关于javascript - 如何修复 jQuery mobile 子菜单中的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60329004/

相关文章:

javascript - 如何将此元素从事件监听器的内部函数传递给另一个函数?

javascript - 如果我在 jquery datepicker 中使用 onSelect 则获取未定义的数据

javascript - 在 moment.js 中获取两个时间之间的小时数

jquery - 如何用div替换每5篇文章?

javascript - 中间件无法连接 HTTP 服务器

javascript - TypeScript(JavaScript) 中的项目范围

javascript - 在 AJAX 成功响应中执行 Javascript 代码(在单独的文件中)?

css - Div 标签和 iframe

html - 如何强制顶部的 Div 成为唯一可滚动的东西

javascript - 使用 x 关闭或隐藏信息框