Javascript 轨道链接到非路由_Javascript_Html_Jquery_Ruby On Rails

Javascript 轨道链接到非路由

javascript html jquery ruby-on-rails

Javascript 轨道链接到非路由,javascript,html,jquery,ruby-on-rails,Javascript,Html,Jquery,Ruby On Rails,这与我之前的帖子有关，我很绝望，我相信这会有一个简单的解决方案，我只是不知道如何。。。我用Ruby 2.7.2和Rails 6.1.3开始了另一个项目。我在侧栏中使用了一个手风琴菜单，但“链接：到”只是忽略了路线。。。我发现Javascript视觉效果（手风琴菜单）和我上一篇文章中的模式使用“event.preventDefault（）”来实现视觉魔术。。。奇怪的是，如果我在浏览器导航中写下路线，它就会工作。。。所以这只是我的代码不起作用…路由像往常一样使用“资源：用户”生成 user

这与我之前的帖子有关，我很绝望，我相信这会有一个简单的解决方案，我只是不知道如何。。。我用Ruby 2.7.2和Rails 6.1.3开始了另一个项目。我在侧栏中使用了一个手风琴菜单，但“链接：到”只是忽略了路线。。。我发现Javascript视觉效果（手风琴菜单）和我上一篇文章中的模式使用“event.preventDefault（）”来实现视觉魔术。。。奇怪的是，如果我在浏览器导航中写下路线，它就会工作。。。所以这只是我的代码不起作用…路由像往常一样使用“资源：用户”生成

     users GET    /users(.:format)            users#index
           POST   /users(.:format)            users#create
  new_user GET    /users/new(.:format)        users#new
 edit_user GET    /users/:id/edit(.:format)   users#edit
      user GET    /users/:id(.:format)        users#show
           PATCH  /users/:id(.:format)        users#update
           PUT    /users/:id(.:format)        users#update
           DELETE /users/:id(.:format)        users#destroy

这是代码。。。控制器操作：（app/controllers/users\u controller.rb）

class UsersController


创建菜单的散列（app/controllers/application\u controller.rb）
class ApplicationControllerAlmacen，：子菜单=>
[
{：opcion=>“Entradas”，：ruta=>“#”}，
{：opcion=>“Salidas”，：ruta=>“#”}
]
},
{:letrero=>“Proveedores”，：子菜单=>
[
{：opcion=>“Indice”，：ruta=>“suppliers_path”}
]
},
{:letrero=>Productos'，：子菜单=>
[
{:opcion=>“索引”，:ruta=>“产品路径”}，
{：opcion=>“Autorización”，：ruta=>'#'}
]
},
{:letrero=>“Usuarios”，：子菜单=>
[
{：opcion=>“Indice”，：ruta=>“users\u url”}
]
}
]
结束
结束

侧栏菜单（app/views/static_pages/_sidebar.html.erb）：









这是app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>AlmacenCEB</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= favicon_link_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
  </head>

  <body>
    <div class="container">
      <nav>sistema de caja</nav>
      <div class="main-w">Main
        <%= yield %>
      </div>
      <div class="sidebar">
        <div class="titulo">Menú principal</div>
        <%= render "static_pages/sideBar" %>
      </div>
      <footer>Footer</footer>
    </div>  
  </body>
</html>


阿拉木图
>
西斯特马酒店
主要
梅努校长
页脚

这是一对解释这个案例的图片


这是应用程序的回复：
我想你的问题出在app/javascript/packs/static_pages.js
文件中，特别是通过这个调用，你正在阻止点击事件传播到
儿童。
我在YouTube上找到了这个问题的解决方案，我希望它能帮助寻找类似问题的人，老实说，没有问题，但我缺乏JavaScript方面的知识。。。下面是app/JavaScript/packs/static_pages.js中必须包含的完整JavaScript函数
$(function () {
  $('.menu li:has(ul)').on("click", function(e) {
    e.preventDefault();
    if ($(this).hasClass('activado')) {
      $(this).removeClass('activado');
      $(this).children('ul').slideUp();
    } else {
      $('.menu li ul').slideUp();
      $('.menu li').removeClass('activado');
      $(this).addClass('activado');
      $(this).children('ul').slideDown();
    }
  });

  $(".menu li ul li a").on("click", function (e) {
    window.location.href = $(this).attr("href");
  });
});

多亏了Alter Lagos提供的方向介绍
我认为你是对的，我尝试加入了一个e.stopPropagation（），但不确定在哪里或如何做，我正在阅读文档以了解更多信息it@LuisFlores但是为什么要停止传播事件呢？我只是猜测，我不太擅长JavaScript。。。我正在看一些Youtube视频，试图了解它是如何做到的works@LuisFlores酷。但是在一天结束的时候，删除这一行是否解决了你的链接问题？如果是这样，考虑把我的答案标记为“接受”，拉西试着把那条线取出，但手风琴菜单效果停止工作（我看不到主要选项背后的选项），所以，这不是解决方案，抱歉没有及时响应。我想我需要找出在手风琴显示后如何响应点击。。。
<ul class="menu">
  <% @options.each do |opcion| %>
    <li>
      <%= link_to "#{opcion[:letrero]}<i class='icono derecha fas fa-chevron-down drop-down'></i>".html_safe, '#'%>
      <ul>
        <li>
          <% opcion[:submenu].each do |subopcion| %>
            <%= link_to subopcion[:opcion], eval(subopcion[:ruta]) %>
          <% end %>
        </li>
      </ul>
    </li>
  <% end %>
</ul>

<!DOCTYPE html>
<html>
  <head>
    <title>AlmacenCEB</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= favicon_link_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
  </head>

  <body>
    <div class="container">
      <nav>sistema de caja</nav>
      <div class="main-w">Main
        <%= yield %>
      </div>
      <div class="sidebar">
        <div class="titulo">Menú principal</div>
        <%= render "static_pages/sideBar" %>
      </div>
      <footer>Footer</footer>
    </div>  
  </body>
</html>

$(function () {
  $('.menu li:has(ul)').on("click", function(e) {
    e.preventDefault();
    if ($(this).hasClass('activado')) {
      $(this).removeClass('activado');
      $(this).children('ul').slideUp();
    } else {
      $('.menu li ul').slideUp();
      $('.menu li').removeClass('activado');
      $(this).addClass('activado');
      $(this).children('ul').slideDown();
    }
  });

  $(".menu li ul li a").on("click", function (e) {
    window.location.href = $(this).attr("href");
  });
});