我目前在 jQuery UI 中使用滑动条,但它们似乎相互冲突,我似乎无法弄清楚它有什么问题。滑动条本身过度延伸,导致出现大量不需要的空白区域。我想知道我能做些什么来解决这个问题。任何帮助表示赞赏!谢谢。
<div class="sb-site-container" data-role="main">
<div class="ui-mobile-nav sb-toggle-left">
<span class="icon-menu6 ui-small-icon">Menu</span>
</div>
<div class="ui-inner-default">
<div id="ui-mov-accordion">
<h3>General</h3>
<div class="ui-default-container ui-inner-default" >
<h2 class="ui-svc-subtitle">Rooms</h2>
<table class="tg">
<tr>
<th class="tg-s6z2">Rooms</th>
<th class="tg-s6z2">1</th>
<th class="tg-s6z2">2</th>
<th class="tg-s6z2">3</th>
<th class="tg-s6z2">4</th>
<th class="tg-s6z2">5</th>
</tr>
<tr>
<td class="tg-s6z2">Starting Price</td>
<td class="tg-s6z2">S$20</td>
<td class="tg-s6z2">S$50</td>
<td class="tg-s6z2">S$60</td>
<td class="tg-s6z2">S$80</td>
<td class="tg-s6z2">S$100</td>
</tr>
</table>
</div>
</div>
<div class="ui-mobile-navbar sb-slidebar sb-left">
<ul class="nav-mobile-items">
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
最佳答案
我是 Adam,Slidebars 的作者。
您不需要同时使用 #sb-site
和 .sb-site-container
。网站容器类是从 0.10 版开始为那些不想使用 id 的人添加的。
您遇到的问题是因为您的 .sb-slidebar
元素位于您的 .sb-site-container
内。当打开动画被触发时,它会拉动 Slidebar 和网站。
您的网站容器和滑动条需要是 body 标签的直接子代,如下所示:
<body>
<div class="sb-site-container">
<!-- Your main page content here -->
</div>
<div class="sb-slidebar sb-left">
<!-- Your off-canvas content here -->
</div>
</body>
我已经更新了你的 fiddle ,并为你更正了它。
希望对您有所帮助,也很高兴您使用该插件 :)
谢谢,亚当
关于jQuery UI Accordion 与滑动条冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24973861/