Question

嗨，我有一个隐藏在屏幕一侧的导航菜单，可以切换，不幸的是它不允许我点击内部的锚链接（它只是切换而不是我可以做的事情来覆盖防止默认并使锚标签工作？

var one = {queue:true, duration:1250, easing: 'easeInOutExpo'};
var two = {queue:true, duration:1500, easing: 'easeInOutExpo'};

$('nav').toggle(
function()  { showMenu() },
function()  { hideMenu() });

$(window).bind('load', function() {
setTimeout ( 'hideMenu()', 1000 );
});

function hideMenu()
{
$('nav').animate({ left: '-=270' },  one);
$('#container').animate({ left: '-=270' }, two);
}
function showMenu()
{
$('nav').animate({ left: '+=270' },  one);
$('#container').animate({ left: '+=270' }, two);
}

Answer 1

假设链接在nav元素内，并触发在该元素上设置的动画？

$('a', 'nav').on('click', function(e) {
    e.stopPropagation();
});

将停止点击锚点，从冒泡到nav元素。

Answer 2

要使锚定工作，必须提供非空href属性

您可以阻止.click()上的默认行为

$('a.optional-class').click(function(e){
    e.preventDefault(); // it's way more powerful than...
    // your code goes here
    return false; // ... than this
});

事情是，上述两种黑客（？）以不同的方式工作， 1）.preventDefault()只是告诉浏览器这个锚实际上不是锚，不应该被视为一个锚;阻止任何<a />操作 2）return false告诉浏览器用户实际上没有点击链接;这将不阻止滚动网站，如果

<a href="#some_id_here">
<!-- some code and height goes here... -->
<div id="some_id_here"></div>

Jquery切换覆盖preventdefault

2 个答案: