我正在尝试让这个 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>
任何帮助都值得赞赏!提前致谢!
挎包
最佳答案
将您的页面与 https://stories-rails.herokuapp.com/ 中的页面进行比较它似乎缺少一些 css 配置和/或类定义:
对于 div sidr，您需要添加以下样式以使菜单显示在左侧:
- 位置:固定
- 背景颜色:#ccc
- 宽度:240px
对于列表项，没有完成太多的布局配置...这就是为什么它们在那里显示为“原始”。
请从您的引用网站查看以下类(class)(首先):
- .菜单
- .菜单ul
- ol，ul
- .菜单li a
您的 div 定义和加载的 css 文件中似乎缺少类 menu ，您可能错过了插件中的 css 文件(我'我不熟悉 sidr，但这是一个合理的猜测)。
关于javascript - 让 jquery 插件 (sidr) 与 Rails 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32366732/