[英]Rails and JQuery drop down list
我正在尝试在Rails网站的ruby网站上使用JQuery制作菜单栏/下拉列表,我已将jquery代码包含在application.js文件中,因为我希望它适用于我网站中的每个文件,菜单在application.html.erb文件中,以便将视图干一点。
jQuery代码在第一次运行时效果很好,例如,我可以导航到页面并使用导航栏将我返回首页,但是一旦返回首页,除非我手动刷新页面,否则下拉列表将无法正常工作,就好像根本没有加载jquery一样,这可能是Rails缓存文件而不是重新加载它们导致我的文档.ready触发器混乱的结果吗?
任何帮助,将不胜感激,我如何才能使它连续运行
(application.js)jQuery:
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu > ul').prepend('<li class=\"mobile\"><a href=\"#\"><span>Menu <i>☰</i></span></a></li>');
$('#cssmenu > ul > li > a').click(function(e) {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if( $(this).parent().hasClass('mobile') ) {
e.preventDefault();
$('#cssmenu').toggleClass('expand');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
} )( jQuery );
Application.HTML.ERB:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='/'><span>Account Actions</span></a>
<ul>
<% if user_signed_in? %>
<li><a href= <%= edit_user_registration_path %> ><span> <%= t('editprofileuser') %></span></a></li>
<li class='last'><a class="navbar-link" rel="nofollow" data-method="delete" href= <%= destroy_user_session_path %>><span><%= t('logoutuser') %></span></a></li>
<% elsif company_signed_in? %>
<li><a href= <%= edit_company_registration_path %> ><span> <%= t('editprofilecompany') %></span></a></li>
<li class='last'><a class="navbar-link" rel="nofollow" data-method="delete" href= <%= destroy_company_session_path %>><span><%= t('logoutcompany') %></span></a></li>
<% else %>
<li><a href= <%= new_user_registration_path %> ><span> <%= t('signupuser') %></span></a></li>
<li><a href= <%= new_user_session_path %> ><span> <%= t('loginuser') %></span></a></li>
<li><a href= <%= new_company_registration_path %> ><span> <%= t('signupcompany') %></span></a></li>
<li class='last'><a href= <%= new_company_session_path %> ><span><%= t('logincompany') %></span></a></li>
<% end %>
</ul>
</li>
<li class='has-sub'><a><span>Navigation</span></a>
<ul>
<li class='last'><a href= '/'><span>Homepage</span></a></li>
<li class='last'><a href= 'audits' ><span>View My Audits</span></a></li>
</ul>
</li>
<li><a href= <%= root_path %> ></a>root</li>
<% if user_signed_in? %>
<li class='has-sub'><a href='#'><span><%= t('loggedinas') %> <%= current_user.email %></span></a>
<% elsif company_signed_in? %>
<li class='has-sub'><a href='#'><span><%= t('loggedinas') %> <%= current_company.email %></span></a>
<% end %>
</ul>
</div>
application.CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset "UTF-8";
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.5;
}
#cssmenu {
width: 100%;
background: #fff;
}
#cssmenu > ul {
border: 1px solid #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
@media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
@media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 10px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
background: #f9f9f9;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 200px;
z-index: 1;
}
@media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 100%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
color: #444444;
}
这是Rails Turbolinks的问题。 应该改为使用:
$(document).on('ready page:load', function() {
// Your implementation here ...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.