JavaScript没有在RubyonRails中运行
我目前对Rails的JavaScript有一个问题。我使用的是Rails版本4.1.8，我在网上找到了一个下拉菜单，使用JavaScript来控制它。以前，我在app/config/initializers/assets中单独预编译了所有js资产，但我认为这并不是处理它的正确方法。现在，当我运行rake assets:precompile时，我已经将所有的js添加到application.js中，但奇怪的是，即使我将javascript_include_标记更改为application.js，用于单击文本和扩展菜单的功能也无法工作 我试图从中使用JavaScript的视图的代码：JavaScript没有在RubyonRails中运行,javascript,html,ruby-on-rails-4,asset-pipeline,Javascript,Html,Ruby On Rails 4,Asset Pipeline,我目前对Rails的JavaScript有一个问题。我使用的是Rails版本4.1.8，我在网上找到了一个下拉菜单，使用JavaScript来控制它。以前，我在app/config/initializers/assets中单独预编译了所有js资产，但我认为这并不是处理它的正确方法。现在，当我运行rake assets:precompile时，我已经将所有的js添加到application.js中，但奇怪的是，即使我将javascript_include_标记更改为application.js，用
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Horizontal Drop-Down Menu</title>
<meta name="description" content="Blueprint: Horizontal Drop-Down Menu" />
<meta name="keywords" content="horizontal menu, microsoft menu, drop-down menu, mega menu, javascript, jquery, simple menu" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<%-#= stylesheet_link_tag 'component.css', :media => "all" -%>
<%-#= stylesheet_link_tag 'default.css', :media => "all" -%>
<%= stylesheet_link_tag 'application.css', :media => "all" %>
<!---<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>---->
<%-#= javascript_include_tag 'modernizr.custom.js' -%>
<%= javascript_include_tag 'application.js' %>
<!---</head>
<body>--->
<div class="container">
<header class="clearfix">
<span>Catch phrase is catchy...</span>
<a><%= link_to image_tag 'Western-Maryland_AHEC_logo.png', controller: "home"%></a>
<h1>Heading</h1>
<!---<nav>
<a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
<a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
</nav>--not working for now-->
</header>
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">About</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Views</h4>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Major Activities</a></li>
<li><a href="#">Strategic Action Plan</a></li>
</ul>
</div>
<div>
<h4>News</h4>
<ul>
<li><a href="#">Annual Reports</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<div>
<h4>People</h4>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Caucuses</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Dental</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Meetings</a></li>
</ul>
<h4>Dietetic</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
<li><a href="#">Nutrition Resources</a></li>
<li><a href="#">Area Registered Dietitians Directory</a></li>
<li><a href="#">Western Maryland Regional Medical Center Dietitians</a></li>
</ul>
</div>
<div>
<h4>Massage Therapy</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">News and Events</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Services</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Resources</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<!---<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/cbpHorizontalMenu.min.js"></script>---->
<%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' %>
<%-#= javascript_include_tag 'cbpHorizontalMenu.min.js' -%>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
</head>
<body>
<%= link_to root_url do %>
<%= image_tag 'Western-Maryland_AHEC_logo.png'%> <!--, width: 136, height: 67, alt: 'Western Maryland Area Health Education Center'%> -->
<% end %>
</body>
</html>
任何帮助都将不胜感激，谢谢 在我的视图中，您可以尝试在application.js文件的最上面添加jquery所需的文件。在那之后，一切都井然有序。因此，它可以提供帮助 尝试在jquery之后移动application.js。您的application.js正在引用“$”即jquery，而您的javascript看起来并不是在等待加载页面的其余部分，因此它不知道该做什么。在页眉和页脚处有脚本标记。这让人困惑，我不明白你为什么这么做。正如前面的评论所建议的，在使用jQuery之前，在代码中加入一些顺序，并包括jQuery。在原始html代码中，它似乎包含3个Java脚本。它寻找modernizer.js，jQuery，然后是一个具有我上面列出的功能的脚本。是否有必要按那个顺序加载它们？如果是这样，如何使用Rails实现这一点？
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };