Question

我试图让这个jQuery sidr插件在codecademy上使用我的rails项目，但它只是不起作用。

这是部署的页面：

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

请注意菜单的左上角图标，不会立即显示，当您点击它时，菜单无法正常显示。

奇怪的是，在codecademy浏览器中菜单显示正常（但图标仍然加载缓慢）。

看起来应该是这样的：

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

以下是一些文件：

layout 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>

任何帮助都表示赞赏！提前谢谢！

手提包

Answer 1

将您的网页与https://stories-rails.herokuapp.com/中的网页进行比较，似乎缺少一些css配置和/或类定义：

对于div sidr，您希望为菜单添加以下样式以显示附加到左侧：

位置是：固定
背景色：#CCC
宽度：240px

对于列表项，没有那么多的布局配置完成......这就是为什么它们在那里显得“原始”。

请查看您的参考网站（开头）中的以下课程：

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

您的menu定义和已加载的css文件中似乎缺少类div，您可能错过了插件中的css文件（我不熟悉sidr，但这是一个公平的猜测。）

Answer 2

您的CSS正在使用.sidr，但您没有将该类添加到HTML中。尝试将<div id="sidr">更改为<div class="sidr">。

获取jquery插件（sidr）以使用Rails

2 个答案: