Aria扩展菜单响应

时间:2016-01-11 11:14:43

标签: jquery events

我有一个响应式菜单,想按条件展开/折叠,我的问题是双重的:

  1. 我可以在菜单属性更改时获取活动吗? f.e。:attr是 aria-expanded ,好的,所以函数为$('#ID').on('aria-expanded-changed')
  2. 我可以用css更改菜单的位置吗?当单击按钮展开它时,菜单显示在顶部,徽标图像位于顶部。我可以更改位置并将其放在徽标的底部吗?
  3. 由于

1 个答案:

答案 0 :(得分:0)

我用事件jQuery解决了我的问题。首先,当您单击按钮以展开菜单时,检查导航是否展开;如果它是假的,将菜单X像素移到底部,其他边缘= 0 px

$('#button').click(function() {
    var expanded = $('#nav_sup').attr('aria-expanded');
    (expanded == 'false') ? $('#ul_nav').css('margin-top', '120px') : $('#ul_nav').css('margin-top', '0px');
});

另一个要点是,当调整窗口大小时,重置选项:

$(window).on('resize', function(){
    $('#nav_sup').removeClass('in');
    $('#nav_sup').attr('aria-expanded', 'false')
    $('#ul_nav').css('margin-top', '0px');
});

此刻,作品......