单击ATBar按钮时更改div的CSS

Question

目前正在尝试解决WordPress网站的问题。该站点安装了ATBar插件，这是一个可访问性插件，每个页面顶部都有一个工具栏。这个工具栏与普通的Wordpress工具栏重叠，因此我在WP工具栏中添加了一些CSS以便将其推下来：

 top: 40px;

因为40px是ATBar的高度。不幸的是，当ATBar关闭时（通过工具栏上的按钮），间隙留在顶部。

我已经尝试将click事件绑定到ATBar关闭按钮，但它没有任何效果，可能是因为ATBar在页面加载时动态加载了JS。因此，我已尝试仅在窗口准备好时绑定事件，而不是文档，但也没有效果！

该网站位于：http://simp.daveclarke.me/，如果您访问此页面，则会看到两个小节。

任何建议表示赞赏

Answer 1

  

我已尝试将click事件绑定到ATBar关闭按钮，但它没有任何效果，可能是因为ATBar在pag上动态加载了JS

我认为这不是动态加载JS的问题，而是wordpress栏在CSS top属性中具有！important的事实。如果您可以删除！important标记，然后执行以下操作：

document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
    document.getElementById('wpadminbar').style.top = "1px"
});

那应该解决问题

Answer 2

你不能做像

这样的事情

$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
   $('#wpadminbar').css({ "top": "0"});
});

Answer 3

尝试使用$('#at-lnk-atkit-unload').on('click', function(){ ...

Answer 4

回答我自己的问题..

最后通过调整他们的JS来管理这个问题。

我没有从他们的服务器导入JS源代码，而是在我的最后创建了一个副本，并添加了@emilioicai在呈现ATBar之后建议的addEventListener调用。这会添加所需的事件监听器和功能。

谢谢！

Answer 5

我认为，问题在于：ATBar在您的代码之后加载，因此事件监听器没有附加。

如果您不想将外国代码复制到您的服务器（这是不合适的决定，'因为它不会一直有效，ATBar的API可能会发展等等），您可能会使用超时

setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever

或者只使用jQuery .on函数（甚至不推荐使用.live函数）