如何阻止菜单在URL中保存其状态?
How do I stop my menu from saving its state in the URL?
我有一个菜单,当我点击到页面的/#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"
它似乎不像你在使用它做任何事情,只是使用元素来处理点击事件与路由
相关文章:
- 如何在浏览器重新加载时保存位置哈希状态
- ReactJS:使用浏览器按钮导航时保存状态
- Extjs 4在父窗口关闭时保存checkboxGroup的状态
- d3.js保存状态
- 具有闭合功能的 For 循环保存状态
- Angular ui路由器,通过url/url变量保存状态
- jqTree 在 IE11 中不执行保存状态工作正常 FF12.
- 在 javascript 中创建一个全局库,同时保存状态和行为
- 保存状态单选按钮javascript html
- Rhino:能够暂停、保存状态和恢复javascript
- 在这个手风琴菜单上实现保存状态功能
- 使用Javascript更改类的宽度并保存状态
- 刷新后如何保存状态我的按钮
- 页面重新加载后菜单的保存状态
- 在实现cookie保存状态到JQuery切换时遇到麻烦
- 使用javascript和jquery保存状态
- 在页面重新加载后,从本地存储检索复选框集合的已保存状态
- 是JavaScript test()在正则表达式中的保存状态
- 当html页面发生更改时,变量处于点击/保存状态时,会执行许多操作
- Angular UI Bootstrap:设置accordion保存状态