具有Turbolinks和切换时下拉菜单的Javascripts /应用程序页面,我尝试使用hide,但它会破坏下拉菜单效果。
//
//= require activestorage
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require popper
//= require gsd/custom
//= require gsd/get-shit-done
//= require gsd/gsdk-bootstrapswitch
//= require gsd/gsdk-checkbox
//= require gsd/gsdk-radio
//= require gsd/jquery-ui-1.10.4.custom.min
//= require js/bootstrap
//= require font_awesome5
//= require turbolinks
//= require_tree .
$( document ).on('turbolinks:load',function() {
$('.dropdown-toggle').dropdown();
$('.page-scroll').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
});
slim编写的应用html
body
#navbar-full
.container
nav.navbar.navbar-ct-blue.navbar-transparent.navbar-fixed-top[role="navigation"]
.container
.navbar-header
button.navbar-toggle[type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"]
span.sr-only
| Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a[href="#"]
.logo-container
.logo
img[src="assets/img/icon.jpg"]
.brand
| Avan Telecom Engineering
#bs-example-navbar-collapse-1.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
li.dropdown
a.dropdown-toggle[href="#" data-toggle="dropdown"]
.space-left
| Services
b.caret
ul.dropdown-menu
= render partial: "layouts/services"
li.dropdown
a.dropdown-toggle[href="#" data-toggle="dropdown"]
| Techology
b.caret
ul.dropdown-menu
= render partial: "layouts/technology"
li.dropdown
a.dropdown-toggle[href="#" data-toggle="dropdown"]
| Clients and Projects
span.caret
ul.dropdown-menu
= render partial: "layouts/clients-projects"
这是带有页面滚动和超棒字体图标的部分(服务)之一。这部分是不言自明的(但是接缝我必须写更多的解释才能发布)。
li
a.page-scroll[href="#strategic"]
i.fa.fa-check-square
/ i.fa.fa-camera-retro
span.space-left Strategic Planning
li
a.page-scroll[href="#feasibility"]
i.fa.fa-check-square
span.space-left Feasibility Studies
li
a.page-scroll[href="#architecture"]
i.fa.fa-check-square
span.space-left System Architecture & Design
li
a.page-scroll[href="#detailed-eng"]
i.fa.fa-check-square
span.space-left Detailed Engineering Design
li
a.page-scroll[href="#rfp"]
i.fa.fa-check-square
span.space-left RFP Preparation
li
a.page-scroll[href="#vendor"]
i.fa.fa-check-square
span.space-left Vendor Selection
li
a.page-scroll[href="#microwave"]
i.fa.fa-check-square
span.space-left Microwave System Engineering
li
a.page-scroll[href="#licensing"]
i.fa.fa-check-square
span.space-left Radio Licensing
/ li
/ a.page-scroll[href="#rfp"]
/ i.fa.fa-check-square
/ span.space-left RFP Preparation
li
a.page-scroll[href="#project"]
i.fa.fa-check-square
span.space-left Project Management & Engineering
li
a.page-scroll[href="#field"]
i.fa.fa-check-square
span.space-left Field Support
li
a.page-scroll[href="#drawing"]
i.fa.fa-check-square
span.space-left Engineering Design Drawing Packages
li
a.page-scroll[href="#implementation"]
i.fa.fa-check-square
span.space-left Implementation Strategies