获取一个jQuery插件（sidr）以与Rails一起使用

Question

I'm trying to get this jQuery sidr plugin to work with my rails project on codecademy but its just not working. 我正在尝试让这个jQuery sidr插件与Codecademy上的Rails项目一起使用，但它却无法正常工作。

Here's the page deployed: 这是部署的页面：

https://tranquil-forest-7907.herokuapp.com/ https://tranquil-forest-7907.herokuapp.com/

Notice the upper left icon for the menu, doesnt appear instantly, and when you click on it, the menu doesn't properly show up. 请注意，菜单的左上角图标不会立即显示，并且在单击它时，菜单无法正确显示。

The weird part is that the menu appears properly (but the icon still loads slow) in the codecademy browser. 奇怪的是，菜单在Codecademy浏览器中正确显示（但图标加载速度仍然很慢）。

It should look something like this: 它看起来应该像这样：

https://stories-rails.herokuapp.com/ https://stories-rails.herokuapp.com/

Here are some files: 以下是一些文件：

layout application.html.erb: 布局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>

the menu stylesheet (sidr-dark.css) 菜单样式表（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}

and the home.html.erb: 和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>

Any help at all is appreciated! 任何帮助都表示赞赏！ Thanks in advance! 提前致谢！

Satchel 书包

Answer 1

Comparing your page with the one in https://stories-rails.herokuapp.com/ it seems to be missing some css configurations and/or the class definitions: 将您的页面与https://stories-rails.herokuapp.com/中的页面进行比较，似乎缺少一些CSS配置和/或类定义：

for the div sidr you would want to add the following styles for the menu to appear attached to the left side: 对于div sidr，您需要添加以下样式以使菜单显示在左侧：

position:fixed 位置是：固定
background-color:#ccc 背景色：#CCC
width: 240px 宽度：240像素

For the list items there isn't that much layout config done... this is why they appear "raw" there. 对于列表项，没有做太多的布局配置...这就是为什么它们在此处显示为“原始”的原因。

please have a look on the following classes from your reference website (to start with): 请参考您的参考网站上的以下课程（从入门开始）：

.menu 。菜单
.menu ul .menu ul
ol, ul ol，ul
.menu li a .menu li a

The class menu seem to be missing from your div definitions and from your loaded css files, You might have missed a css file from the plug-in (I'm not familiar with sidr, but this would be a fair guess). 您的div定义和已加载的css文件似乎缺少类menu ，您可能已经从插件中错过了css文件（我对sidr并不熟悉，但这是一个合理的猜测）。

Answer 2

Your CSS is using .sidr but you aren't adding the class to the HTML. 您的CSS使用的是.sidr但您没有将类添加到HTML。 Try changing <div id="sidr"> to <div class="sidr"> . 尝试将<div id="sidr">更改为<div class="sidr"> 。

获取一个jQuery插件（sidr）以与Rails一起使用

问题描述

2 个解决方案

解决方案1
0 2015-09-03 04:34:45

解决方案2
0 2015-09-03 04:41:44

获取一个jQuery插件（sidr）以与Rails一起使用

问题描述

2 个解决方案

解决方案1 0 2015-09-03 04:34:45

解决方案2 0 2015-09-03 04:41:44

解决方案1
0 2015-09-03 04:34:45

解决方案2
0 2015-09-03 04:41:44