Question

我是Rails的新手。如果有人可以帮助我将此代码转换为ruby link_to方法：

<a href="#top" onclick=$("#menu-close").click();>Home</a>

我试图搜索谷歌的答案。但它让我更加困惑于如何在我的网站上实现它。

<%= link_to "Home" , {:action => "index", :controller => "welcome", :anchor => "top", :onclick => '$("#menu-close").click()' } %>

但仍然没有关闭边栏。

这也是我放在页脚下面的脚本：

$("#menu-close").click(function(e) { 
  e.preventDefault(); 
  $("#sidebar-wrapper").toggleClass("active"); 
});

Answer 1

我希望你所要求的是这个

<%= link_to 'Home', '#top',:onclick => '$("#menu-close").click()'%>

要删除点击并移动它，您可以执行以下操作：

<%= link_to 'Home', '#top',class: 'menu-close-btn'%>

这将是一个js文件

$(".menu-close-btn").click(function(){
  ....
});

我在github上创建了一个例子https://github.com/mzaragoza/sample-opne-close-sidebar

我有什么：

将打开和关闭页面的Js

#app/assets/javascripts/application.js
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";   
}

现在一些基本的CSS

 #app/assets/stylesheets/application.css
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

最后但并非最不重要的是在视图中

#app/views/layouts/application.html.erb
<div id="mySidenav" class="sidenav">
  <%= link_to 'X', 'javascript:void(0)', class: 'closebtn', onclick: "closeNav()" %>
  <%= link_to 'Page 1', '#' %>
  <%= link_to 'Page 2', '#' %>
  <%= link_to 'Page 3', '#' %>
  <%= link_to 'Page 4', '#' %>
</div>

我希望这能够帮助你更多。你可以看到它们如何结合在一起here

快乐编码:)

Answer 2

在你的erb文件中：

<%= link_to 'Home', '#', id: '#top' %>

在你的一些js文件中放置：

$('#top).on('click', function(e){
  e.preventDefault();
  $("#menu-close").click()
});

在rails 4.2上点击事件ruby上的link_to需要帮助

2 个答案: