Question

我试图使用here中的示例来运行最基本的侧边栏示例。这是我的HTML：

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/sidebar.min.css" />
    <script type="text/javascript" src="./css/sidebar.min.js"></script>
  </head>
  <body>
  <div class="ui right vertical menu sidebar">
    <div class="item">foo</div>
    <div class="item">bar</div>
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>
</html>

这显示没有侧边栏;当我在开发人员控制台中输入$('.ui.sidebar').sidebar('toggle')时，我收到此错误：

VM387:2 Uncaught TypeError: $(...).sidebar is not a function(…)

在Windows 8上使用Chrome 49.

如何正确显示侧边栏？

Answer 1

除了不首先将jquery作为依赖项包括在内，如评论中所述，我不建议使用此插件，因为它具有当前状态，缺少文档，并且无法在没有某些外部资源的情况下使用。这是一个基于演示站点的下面一个有用的jsfiddle示例：

https://jsfiddle.net/1cthL39a/8/

<强> HTML

    <div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
    <nav>
        <a href="#" class="icon-menu link-menu jsc-sidebar-trigger"></a>
    </nav>
    <section class="main-content">
        <div class="main-content-header">
            <h1 class="headline"><span class="headline-main">Sidebar</span>JS</h1>
            <p class="version">v 0.2.0</p>
            <p>SidebarJS is a jQuery plugin for side navigation.</p>
            <ul class="btn-list">
                <li><a href="http://github.com/makotot/sidebar" class="btn">View on Github</a></li>
                <li><a href="http://github.com/makotot/sidebar/releases/0.2.0" class="btn">Download</a></li>
            </ul>
        </div>
        <div class="main-content-body">
            <div class="main-content-body-inner">
                <h2>Public API</h2>
                <ul>
                    <li>
                        <h3>.push()</h3>
                        <p><a href="#" id="api-push">Open</a> Sidebar content from JavaScript.</p>
                    </li>
                    <li>
                        <h3>.pull()</h3>
                        <p><a href="#" id="api-pull">Close</a> Sidebar content from JavaScript.</p>
                    </li>
                </ul>
            </div>
        </div>
    </section>

</div>

        <nav class="sidebar jsc-sidebar" id="jsi-nav" data-sidebar-options="">
    <ul class="sidebar-list">
        <li><a href="./" class="current">SidebarJS</a></li>
        <li><a href="http://github.com/makotot/sidebar/">View on Github</a></li>
        <li><a href="http://github.com/makotot/sidebar/releases">Download</a></li>
    </ul>
</nav>

请注意必须包含多少外部资源才能使这件事工作。

侧边栏不是函数错误

1 个答案: