1
У меня возникла проблема с JavaScript с Rails. Я использую Rails версии 4.1.8, и у меня есть раскрывающееся меню, которое я нашел в Интернете, используя JavaScript для управления им. Раньше у меня все активы js предварительно компилировались в app/config/initializers/assets, но я решил, что это не совсем правильный способ справиться с этим. Теперь у меня есть все js, которые просто добавлены в application.js, когда я запускаю rake assets: precompile, но странно, хотя я изменил javascript_include_tag на application.js, функция для щелчка по тексту и расширения меню не работает.JavaScript не работает в Ruby on Rails
Мой код для зрения я пытаюсь использовать JavaScript из:
<!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>
и JavaScript из моих скомпилированных application.js выглядит следующим образом:
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 };
Я чувствую, что это глупый вопрос, но я полностью потерял мнение о том, почему он работает, когда я прекомпилирую эти активы отдельно, но он не работает, когда я пытаюсь ссылаться на них с помощью приложения.js
Любой он lp был бы признателен, спасибо!
Попробуйте переместить application.js после jquery. Ваш application.js ссылается на «$», который является jquery, и это не похоже на то, что ваш javascript ожидает загрузки остальной страницы, поэтому он не знает, что делать. –
У вас есть теги сценариев в верхнем и нижнем колонтитулах. Это сбивает с толку, и я не понимаю, почему вы это делаете. Как и предыдущий комментарий, принесите некоторый заказ в код и включите jQuery перед его использованием. – Elyasin
Я переместил jQuery над application.js, но у него все еще есть та же проблема. В исходном html-коде он выглядит так, как будто он содержит 3 Java-скрипта. Он ищет modernizer.js, jQuery, а затем скрипт, который имеет функцию, указанную выше. Может быть необходимо загрузить их в таком порядке? Если да, то как это можно сделать с Rails? –