2016-03-16 30 views
1

我想從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(…) 

使用Chrome 49在Windows 8

如何獲得側邊欄正確顯示?

+0

首先,在網絡選項卡中,你得到從側邊欄js文件200 OK的狀態碼? –

+0

Plz檢查包含的js文件的路徑。你確定它在css文件夾中嗎? –

+0

@BenSewards是的,資源加載正確。 –

回答

0

除了不包括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> 

注意許多外部資源如何必須包括讓這件事的工作。

+0

我不認爲你使用的是和我一樣的圖書館。我使用Semantic UI的側邊欄,並且您正在使用JQuery側邊欄插件。 –

+0

下次我會記住這一點。如果您更新了有關您的網頁未正確呈現的最新評論的問題,我可能會制定出更好的答案。 –

相關問題