可访问的切换导航

Question

我正在寻求有关我正在尝试创建的可访问切换导航的帮助。 “可访问”是指我试图避免使用 jQuery slideUp 和 SlideDown 时默认添加的“display:none”。

我已经知道了：http://jsfiddle.net/6KX49/2/，这是我由 Chris Coyier 发现的一个糟糕的科学怪人：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;'所以“显示：无”以某种方式被覆盖。说到 jQuery，我绝对是个傻瓜，所以我不能老实说我真的知道它是如何做到的。

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

Answer 1

slideDown 有两个问题。第一个是您仅在所有 slideDown 效果完成后才删除类 inactive。所以，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 样式来控制元素展示。所以，我没有看到 hack 的好处——它使用元素的位置来控制元素的外观。

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