#jquery #ruby-on-rails #ruby-on-rails-3
#jquery #ruby-on-rails #ruby-on-rails-3
Вопрос:
Я новичок в jquery, но я пытаюсь учиться. Я работаю с раскрывающейся кнопкой, которая отлично работает в jsfiddle. Однако, когда я попробую это в своем приложении rails 3, это не сработает. (при нажатии на ссылку ничего не выпадает).
Если я удалю строку $(«.menu»).fixedMenu(); и добавлю ее в html, как это работает. Я в тупике, почему он не работает, как пример jsfiddle
<script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>
Был бы очень признателен за любую помощь или информацию.
рабочий jsfiddle: http://jsfiddle.net/rKaPN/32 /
application.js
(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
$("html").click(function() {
menu.find('.drop-down').removeClass('drop-down');
});
menu.find('ul li > a').bind('click',function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') amp;amp; !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('drop-down')) {
$(this).parent().removeClass('drop-down');
}
else {
//displaying the drop down menu
$(this).parent().parent().find('.drop-down').removeClass('drop-down');
$(this).parent().addClass('drop-down');
}
}
else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.drop-down').removeClass('drop-down');
}
})
});
}
$(".menu").fixedMenu();
})(jQuery);
$(function() {
$("div.post_form").hide();
$("input[name$='post[category_id]']").click(function() {
$("div.post_form").hide();
$("#extra").show("slow")
});
});
$(function(){
$('a.tab_link').click(function(){
$('a.tab_link').removeClass('active')
$(this).addClass('active')
});
});
application_layout.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<%= stylesheet_link_tag 'token-input-facebook' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
<%= javascript_include_tag :defaults %>
</head>
<body style="<%= check_user %>">
<header>
<div class="menu">
<div class="container-margin">
<ul>
<li><%= link_to "Home", root_path, :class => "single_link" %><span></span></a></li>
<li> <%= link_to "Profile", root_path, :class => "single_link" %><span></span></a></li>
<li> <%= link_to "Blog", root_path, :class => "single_link" %><span></span></a></li>
<li class="menu-right">
<a href="#">More<span class="arrow"></span></a>
<!-- Drop Down menu Items -->
<ul>
<li><a href="http://www.google.co.in/reader">Reader Reader Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.in">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="header-two">
<div class="container">
<div id="logo"><%= link_to logo, root_path %></div>
<div id="search">
<%= form_tag search_posts_path, :method => :get do %>
<%= submit_tag "", :name => nil, :class => "search-button" %>
<%= text_field_tag :q, params[:q], :class => "search-box round-3" %>
<% end %>
</div>
</div>
</div>
</header>
custom.css
#header-two {
background:#fff;
height: 74px;
border-bottom: solid 1px #ececec;
}
.container-margin {
width: 1034px;
margin: 0 auto;
position: relative;
}
.menu{
position::absolute;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#999;
height:30px;
background:blue;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li.menu-right{
float:right;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.drop-down ul{
display:block !important;
position:relative;
}
.drop-down a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
.drop-down a:hover{
background-color:white;
color:#3366CC;
}
.drop-down ul a:hover{
background-color:#e4ebf8;
}
.drop-down ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow {
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
Комментарии:
1. Это обычная проблема jQuery — ничего общего с Rails.
Ответ №1:
function($) {...} это функция. $(function($) {...}) нет. Если вы хотите, чтобы он запускал его, когда документ завершает загрузку, вы должны стереть (jQuery) в конце (кроме того, $ аргумент в объявлении функции в этом случае является избыточным). Если вы хотите запустить его при загрузке скрипта, просто удалите начальный $ .
Комментарии:
1. привет, я попробовал то, что вы сказали, но он все еще не работает, мне пришлось настроить строку fixedMenu() в моем html, есть идеи, почему она не работает, как пример js fiddle?
2. Можете ли вы опубликовать свой точный код (тот, с изменением, который все еще не работает)?
Ответ №2:
Удалите первый $
Это должно быть «(function () {«, а не «$ (function () {»