我开始使用jQuery Tools的工具提示(as demonstrated here)设计页面。
我已经修改了一下,允许onClick show和onClick hide。适用于Chrome,Safari和Firefox。
但它不适用于IE 9,尽管jquery工具意味着非常兼容浏览器。
我使用的脚本是:
$(function() {
// initialize tooltip
var tooltip = $("#cog").tooltip({
tipClass: 'usermenu',
effect: 'slide',
bounce: true,
direction: 'down',
slideOffset: 10,
offset: [-5,-38],
delay: 500,
position: 'bottom center',
relative: true,
events: {
def: ",", // default show/hide events for an element
input: ",", // for all input elements
widget: ",", // select, checkbox, radio, button
tooltip: "," // the tooltip element
},
onBeforeShow: function() {
document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');
},
onHide: function() {
document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');
}
});
tooltip.click(function() {
var tip = $(this).data("tooltip");
if (tip.isShown(true))
tip.hide();
else
tip.show();
});
});
其中
#cog
是触发器,
usermenu
是工具提示DIV
看到它直播我做了一个示例页面: http://test.theshananway.com/test.html(参见右上角的齿轮)
请帮我找一个让它在IE中运行的方法,或者让我知道是否有IE替代方案?
谢谢!
答案 0 :(得分:0)
IE不喜欢.classList属性...试试这个:
$('#cog_img').toggleClass("inactive_cog_img").toggleClass("active_cog_img");
而不是:
document.getElementById("cog_img").classList.toggle('inactive_cog_img');
document.getElementById("cog_img").classList.toggle('active_cog_img');