jQuery UI Accordion 与滑动条冲突

标签 jquery html css

我目前在 jQuery UI 中使用滑动条,但它们似乎相互冲突,我似乎无法弄清楚它有什么问题。滑动条本身过度延伸,导致出现大量不需要的空白区域。我想知道我能做些什么来解决这个问题。任何帮助表示赞赏!谢谢。

http://jsfiddle.net/F2v8K/1/

<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 ,并为你更正了它。

http://jsfiddle.net/xWvBL/3/

希望对您有所帮助,也很高兴您使用该插件 :)

谢谢,亚当

关于jQuery UI Accordion 与滑动条冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24973861/

相关文章:

javascript - 如何使用jquery获取最后点击的单选值?

javascript - Pnotify - 在模态背景上显示通知

javascript - 不支持它的浏览器的@page size 的替代方案?

jquery - 为 "click"属性解除绑定(bind) "onclick"

php - 如何将文件名分配给php中的类

javascript - 使用 jquery 对多个表单进行通用电子邮件验证

javascript - 不同body背景onClick之间如何过渡? (尝试 2)

javascript - 如何在一个选择器 jQuery 中显示和隐藏多个元素?

html - Firefox - 字体在 :hover 上发生变化

html - 透明 png 不呈现为透明?