Rails 3：我的jQuery的下拉菜單不工作，導致其他js不工作

我是新來的jquery，但我試圖學習。我正在使用一個在jsfiddle中工作得很好的下拉按鈕。但是，當我在我的rails 3應用程序中嘗試它時，它不起作用。（當你點擊鏈接時沒有下降）。Rails 3：我的jQuery的下拉菜單不工作，導致其他js不工作

如果我刪除行$（「。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') && !$(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; 
}

來源

2011-10-27 trying_hal9000

這是一個普通的jQuery問題 - 與Rails無關。 – Tom