如何阻止菜单在URL中保存其状态?

How do I stop my menu from saving its state in the URL?

本文关键字:保存 状态 URL 何阻止 菜单      更新时间:2023-09-26

我有一个菜单,当我点击到页面的/#0,表明它已经打开,我想知道如何做是防止这个显示或找到打开菜单的替代方式。下面是菜单触发器html:

<header class="cd-header">
     <a href="#0" class="cd-3d-nav-trigger">
         Menu
         <span></span>
    </a>
</header>

完整的javascript文件可以在这里找到

jQuery(document).ready(function($){
    //toggle 3d navigation
    $('.cd-3d-nav-trigger').on('click', function(){
        toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
    });
    //select a new item from the 3d navigation
    $('.cd-3d-nav').on('click', 'a', function(){
        var selected = $(this);
        selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
        updateSelectedNav('close');
    });
    $(window).on('resize', function(){
        window.requestAnimationFrame(updateSelectedNav);
    });
    function toggle3dBlock(addOrRemove) {
        if(typeof(addOrRemove)==='undefined') addOrRemove = true;   
        $('.cd-header').toggleClass('nav-is-visible', addOrRemove);
        $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
        $('main').toggleClass('nav-is-visible', addOrRemove).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            //fix marker position when opening the menu (after a window resize)
            addOrRemove && updateSelectedNav();
        });
    }
    //this function update the .cd-marker position
    function updateSelectedNav(type) {
        var selectedItem = $('.cd-selected'),
            selectedItemPosition = selectedItem.index() + 1, 
            leftPosition = selectedItem.offset().left,
            backgroundColor = selectedItem.data('color'),
            marker = $('.cd-marker');
        marker.removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
            'left': leftPosition,
        });
        if( type == 'close') {
            marker.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                toggle3dBlock(false);
            });
        }
    }
    $.fn.removeClassPrefix = function(prefix) {
        this.each(function(i, el) {
            var classes = el.className.split(" ").filter(function(c) {
                return c.lastIndexOf(prefix, 0) !== 0;
            });
            el.className = $.trim(classes.join(" "));
        });
        return this;
    };
});

提前感谢。

扩展我上面的评论,您需要阻止默认操作的发生。

$('.cd-3d-nav-trigger').on('click', function(e){
    e.preventDefault();
    toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
});

你也可以从点击处理程序return false,这将阻止默认动作阻止事件传播到父元素。

似乎滥用了锚标记,但如果你想让它保持原样,只需删除href="#0"它似乎不像你在使用它做任何事情,只是使用元素来处理点击事件与路由