【发布时间】：2015-09-03 04:00:07
【问题描述】：
我正在尝试让这个 jQuery sidr 插件与我在 codecademy 上的 rails 项目一起使用，但它只是无法正常工作。
这是部署的页面：
https://tranquil-forest-7907.herokuapp.com/
注意左上角的菜单图标，并没有立即出现，当你点击它时，菜单没有正确显示。
奇怪的是菜单在 codecademy 浏览器中正确显示（但图标仍然加载缓慢）。
它应该看起来像这样：
https://stories-rails.herokuapp.com/
这里有一些文件：
布局application.html.erb：
<!DOCTYPE html>
<html>
<head>
<title>Stories</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300" rel="stylesheet" type="text/css">
</head>
<body>
<%= yield %>
<div class="footer">
<div class="container">
Developed by Satchel French
</div>
</div>
<!-- javascript -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</body>
</html>
菜单样式表（sidr-dark.css）
.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"Roboto",tahoma,verdana,arial,sans-serif;font-size:19px;background:#000;color:#fff; font-weight:100;}
.sidr .sidr-inner{padding:0 0 15px}
.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}
.sidr.right{left:auto;right:-260px}
.sidr.left{left:-260px;right:auto}
.sidr p{font-size:15px;margin:0 0 12px}
.sidr p a{color:rgba(255,255,255,0.9)}.sidr>p{margin-left:15px;margin-right:15px}
.sidr ul{display:block;margin:0 0 15px;padding:0;}
.sidr ul li{display:block;margin:10px;line-height:48px}
.sidr ul li:hover {background:#191919; margin: 10px;}
.sidr ul li a,.sidr ul li span{padding:0 40px;display:block;text-decoration:none;color:#fff}
还有home.html.erb：
<!DOCTYPE html>
<html>
<!-- menu -->
<div id="sidr">
<!-- Your content -->
<ul>
<li class="active"><a href="#">Welcome</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- start page -->
<div class="window main">
<div class="container">
<!-- menu button -->
<a id="simple-menu" href="#sidr"><%= image_tag('https://s3.amazonaws.com/codecademy-content/projects/z2d/stories/menu-white.svg',class:'icon-menu', alt:'open', width:'24px') %></a>
<!-- content -->
<div class="row">
<div class="content col-md-6 col-md-offset-6">
<h1 class="headline"> Satchel and Travel </h1>
<p><a class="btn btn-primary sharp btn-lg" href="#" role="button"> Learn more </a> </p>
</div>
</div>
</div>
</div>
<!-- home -supporting -->
<div class="window-support">
<div class="container">
<h2 class="headline">Lets write about the moments.</h2>
</div>
</div>
<!-- home secondary -->
<div class="secondary">
<div class="container">
</div>
</div>
<!-- secondary support -->
<div class="window-support">
<div class="container">
<h2 class="headline">Interested?</h2>
<p><a class="btn btn-primary sharp btn-lg" href="#" role="button">Adventure</a></p>
</div>
</div>
</html>
感谢任何帮助！提前致谢！
挎包
【问题讨论】：
标签： javascript jquery html css ruby-on-rails