单击后如何滚动下拉菜单?

时间:2019-09-16 04:35:58

标签: javascript jquery turbolinks

具有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

0 个答案:

没有答案