【问题标题】:Show Hide Scollto Menu won't fire Normal Links?Show Hide Scollto Menu 不会触发普通链接?
【发布时间】:2014-08-13 17:24:38
【问题描述】:

不知道我在这里做错了什么。 但是当我测试这个菜单时,绝对链接不会触发? 我正在使用 jquery 脚本来触发菜单的显示/隐藏功能,并同时从几个 div 中添加和删除特定的类名。

我想做的是让它成为绝对 url 的工作,以便转到外部页面。我正在使用我自己的带有绝对路径的内部页面进行测试。

<!-- START SHOW HIDE DROP MENU -->
<div id="mobileMenu" class="list-nav menu_hide"><!-- add class of menu_show, and simultaneously add a class of show-lockscreen to the screen class below. -->
    <ul>
        <li><a href="http://jonnyb.org/index.php" id="item-1">Home Screen</a></li>
        <li><a href="http://jonnyb.org/index.php">Web Focused</a>
            <ul>
                <li><a href="#websummary" class="scroll">Summary</a></li>
                <li><a href="#portfolio" class="scroll">Portfolio</a></li>
                <li><a href="#weboverview" class="scroll">Overview</a></li>
                <li><a href="#webskills" class="scroll">Skills</a></li>
            </ul>
        </li>
        <li><a href="http://jonnyb.org/music.php">Music Focused</a>
            <ul>
                <li><a href="#musicsummary" class="scroll">Summary</a></li>
                <li><a href="#music" class="scroll">Music</a></li>
                <li><a href="#video" class="scroll">Video</a></li>
                <li><a href="" class="scroll">Photos (coming soon)</a></li>
                <li><a href="#musicoverview" class="scroll">Overview</a></li>
                <li><a href="#musicskills" class="scroll">Skills</a></li>
            </ul>
        </li>
        <li><a href="#connect" class="scroll">Connect</a></li>
    </ul>
</div>
<!-- END SHOW HIDE DROP MENU -->

这是我为显示/隐藏和滚动以及其他一些使用的功能实现的简单 JS。

/* ============================================================
SCROLL TO
=============================================================== */

$(document).ready(function(){ 
    // show and hide mobile menu
    $('a#triggerMobileMenu, div#mobileMenu li a').on('click', function(evt){
        evt.preventDefault();
        $('#mobileMenu').toggleClass('menu_hide menu_show');
        $('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
    });
}); 


/*global $:false */
$(document).ready(function(){"use strict";

    $(".scroll").click(function(event){

        var full_url = this.href;
        var parts = full_url.split("#");
        var trgt = parts[1];
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top - 75;

        $('html, body').animate({scrollTop:target_top}, 1500);

    });
}); 


$(document).ready(function(){ 

     $(window).scroll(function(){
         if ($(this).scrollTop() > 100) {
             $('.scrollup').fadeIn();
         } else {
             $('.scrollup').fadeOut();
         }
     }); 

     $('.scrollup').click(function(){
         $("html, body").animate({ scrollTop: 0 }, 600);
         return false;
     });

 });


$(document).ready(function() {

    // the portfolio items
    var $container = $('#isotope-container');
    $container.isotope({
        layoutMode: 'masonry',
        masonry: {
            columnWidth: 127,
            gutter: 16
        },

        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });


    // filter portfolio items
    $('#isotope-options a').click(function(){
        $('#isotope-options .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });

});


$(document).ready(function() {
    $(".fancybox").fancybox();
});


$(document).ready(function() {
    $("img.lazy").lazyload({
        effect : "fadeIn"
    });
});


$(document).ready(function () {
    //call this first so we start out with the correct visibility depending on the selected form values
    toggleFields();

    //this will call our toggleFields function every time the selection value field changes
    $("#projecttype").change(function () {
        toggleFields();
    });
});

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    您正在对传入的事件调用 preventDefault()。这将阻止锚标记的默认功能。

    【讨论】:

    • 在一个实例中允许锚标记功能的最佳实践是什么,但在显示隐藏菜单或滚动类型的情况下不允许页面刷新或像故障刷新一样闪烁。如果我从任一组脚本中删除 preventDefault() ,然后在 scrollto 上的一个我得到我提到的故障重新加载。或者在显示/隐藏时它不会允许该功能,而只会尝试转到预显示/隐藏的链接。
    • 仅供参考...有抱负的 js/jQuery 学生。
    • 你可以只添加一个条件。 if { $(this).hasClass('scroll') ){ evt.preventDefault(); }
    • 好的...我尝试添加该行,但由于我的知识有限,我运气不佳。请参阅上面添加的自定义 JS,我正在实现它。
    猜你喜欢
    • 1970-01-01
    • 2018-12-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-01
    • 1970-01-01
    相关资源
    最近更新 更多