Question

我正在寻找一些我正在尝试创建的可访问切换导航的帮助。通过'accessible'我的意思是我试图避免'display：none'，当你使用jQuery slideUp和SlideDown时默认添加它。

我已经达到了这个目标：http://jsfiddle.net/6KX49/2/，这是克里斯科伊尔发现的一个不好的弗兰克斯坦：http://jsfiddle.net/chriscoyier/zgtfA/1/。

这是我的脚本（更多关于jsfiddle链接）：

var $button = $('.navigation-title a'),
    $accordion = $('.global-nav ul');

$button.click(function () {

    if ($accordion.hasClass('inactive')) {
        $accordion.slideDown(1000, function () {
            $accordion.removeClass('inactive');
        });
    } else {
        $accordion.slideUp(1000, function () {
            $accordion.addClass('inactive').slideDown(0);
        });
    }
});

似乎有效 - 折叠导航的风格为'display：block;'所以'display：none'正以某种方式被覆盖。当谈到jQuery时，我是一个绝对的假人，所以我不能说老实说我真的知道它是怎么做的。

我需要帮助的问题是slideDown动画无效。任何想法为什么会这样？任何帮助表示赞赏。

Answer 1

slideDown 有两个问题。第一个是在完成所有 slideDown 效果后，您只删除了非活动类。因此， nav 在整个效果期间不可见。

$accordion.slideDown(1000, function () {
  $accordion.removeClass('inactive'); //Only executed after the slideDown effect being executed.
});

第二个问题是，当菜单处于非活动状态时，执行幻灯片效果的'hack'错误：

$accordion.slideDown(1000, function () { //$accordion.slideUp(0, function () {
  $accordion.removeClass('inactive'); //$accordion.removeClass('inactive').slideDown(1000);
});

您可以使用 slideToggle 简化此代码：http://jsfiddle.net/bpinto/aAQcJ/使用 display：none 隐藏 nav 。

关于 slideDown / slideUp 函数需要注意的一件重要事情是，jquery将添加 display：none 样式来控制元素展示。所以，我没有看到黑客的好处 - 它使用它的位置控制元素外观。

即便如此，我相信slideToggle版本更好，这是您的更新代码：http://jsfiddle.net/bpinto/smh8T/

可访问的切换导航

1 个答案: