Question

我有一个网页，以及我编写的一些jQuery，并且在我将它带入我的rails应用程序之前一直在运行。我不确定这是否是一个turbolink问题（就像我以前一样）或者它是否无关紧要。

我的jQuery脚本用于我的自定义下拉菜单，当点击导致下拉列表出现时，下拉列表不会保留，并且所有html都会重置。我有一段视频：http://tinypic.com/r/35ml7jr/8，显示了我要解释的内容。

的jQuery

$(document).on("page:change", function() {

    $(".navbar-link").on("click", function() {
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;

        var isDown = dd.hasClass('down');
        var numDown = $(document).find(".down").length;

        var screenWidth = $( window ).width();

        // check width to determine how to proceed

        if ( screenWidth > 767 ) {
        // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.show();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                    $(".rest").animate({"top": "105px"});
                }
            }   

            var isActive = el.hasClass('activate');
            $(".navbar-link").removeClass('activate');

            $(".arrow-up").css("left", corrected_center);

            if (isActive) {
                $('.arrow-up').hide(400);
            } else {
                $('.arrow-up').show();
                el.addClass('activate');
            }

        // for small screens
        } else {

            // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").slideUp();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }
            }
        }
    });
});

Answer 1

而不是.on('click',function(){...}) 尝试使用

.on('click',function(event){
   event.preventDefault(); // This should prevent reloading
   //YOUR CODE GOES HERE
   return true; // It informs, that event has ended
})

Rails：jQuery - 在事件完成之前重置页面

的jQuery

1 个答案: