文章/答案/技术大牛

发布

社区首页 >问答首页 >让jquery插件(sidr)与Rails一起工作

问让jquery插件(sidr)与Rails一起工作
EN

Stack Overflow用户

提问于 2015-09-03 04:00:07

回答 2查看 138关注 0票数 1

我试图让这个jQuery sidr插件与我的rails项目协同工作，但它只是不起作用。

下面是已部署的页面：

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

注意菜单的左上角图标，不会立即出现，当你点击它时，菜单没有正确地显示出来。

奇怪的部分是菜单显示正确(但图标加载速度仍然慢)。。

它应该是这样的：

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-Dar.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>

任何帮助都是非常感谢的！提前感谢！

书包

html

css

ruby-on-rails

javascript

jquery

回答 2

Stack Overflow用户

发布于 2015-09-03 04:34:45

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

对于div，您需要为菜单添加以下样式，使其显示在左侧：

职位:固定
背景色：#ccc
宽度:240

对于列表项，没有完成太多的布局配置.这就是为什么他们看起来“生”在那里。

请在您的参考网站上查看以下课程(首先)：

.menu
.menu ul
奥尔
.menu李a

类menu似乎在您的div定义和加载的css文件中缺失，您可能忽略了插件中的css文件(我不熟悉div，但这是一个合理的猜测)。

票数 0

Stack Overflow用户

发布于 2015-09-03 04:41:44

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32366732

复制

相似问题

问让jquery插件(sidr)与Rails一起工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让jquery插件(sidr)与Rails一起工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让jquery插件(sidr)与Rails一起工作
EN