Question

我目前正在使用带有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>

Answer 1

我是亚当，Slidebars的作者。

您不需要同时使用#sb-site和.sb-site-container。对于那些不想使用id的人，从版本0.10添加了站点容器类。

由于您的.sb-slidebar元素位于.sb-site-container内，因此您遇到了问题。当触发开始动画时，它会拉动Slidebar以及站点。

您的网站容器和幻灯片需要是正文标记的直接子代，如下所示：

<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>

我已更新你的小提琴，并为你纠正。

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

我希望您使用该插件有所帮助并感到高兴：）

谢谢，亚当

Answer 2

根据usage docs，插件可以使用一些相当具体的html。如果在主要内容周围添加了sb-site div，那么您的示例代码似乎正常工作：

<div id="sb-site">
    <div class="sb-site-container" data-role="main">
    ...
    </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>

另请注意，上面的代码必须是body元素的直接子元素，并且您需要此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

jQuery UI手风琴与幻灯片冲突

2 个答案: