1

我正在寻找有关我正在尝试创建的可访问切换导航的帮助。“可访问”是指我试图避免使用 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);
        });
    }
});

它似乎正在工作 - 折叠的导航具有“显示：块”的样式；所以“显示：无”以某种方式被覆盖。说到 jQuery，我绝对是个傻瓜，所以我不能老实说我真的知道它是如何做到的。

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

4

1 回答 1

1

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

$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来隐藏您的导航。

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

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

于 2013-01-27T11:36:33.107 回答