[英]click and hover function in a element in jquery
i have a navigation bar that expands on hover and reduces on mouse out. 我有一个导航栏,在悬停时会扩展,在滑出时会减少。 i want to insert a click function to the navbar, after clicking the navbar will not reduce.
我想在导航栏上插入单击功能,单击导航栏后将不会缩小。 how to do it.
怎么做。 presently my code is
目前我的代码是
$(".nav_list li").css('display','none');
$("#navbar").hover(function(){
$("#navbar_inner").css({"width":"972px","margin-left":"0px"});
$(".nav_list li").delay(800).fadeIn(500);
},
function(){
$(".nav_list li").stop(true,true);
$(".nav_list li").fadeOut(001);
$("#navbar_inner").css({"width":"70px","margin-left":"451px"});
});
how do i implement the desired result upon my present code 我如何在当前代码上实现预期的结果
Yes possible. 可以的。 You can do it using .on() event click handler attachment
您可以使用.on()事件点击处理程序附件进行操作
$('#navbar').on('click', function(){
//ToDos
$(this).unbind('hover'); //Incase if you want to stop hovering
});
I would suggest you to use .on()
and .off()
event handler attachment. 我建议您使用
.on()
和.on()
.off()
事件处理程序附件。
isHover = true; // Bool variable to hover or not
$("#navbar").on('hover', animation);
$('#navbar').on('click', function () {
if (isHover) {
$(this).off('hover');
isHover = false;
} else {
$(this).on('hover', animation);
isHover = true;
}
});
function animation() {
$("#navbar_inner").css({
"width": "972px",
"margin-left": "0px"
});
$(".nav_list li").delay(800).fadeIn(500);
}
$('#navbar').on('click', function(){
$("#navbar_inner").css({"width":"972px","margin-left":"0px"});
});
$(".nav_list li").css('display', 'none');
function handler1() {
$(this).off('hover').one("click", handler2);
}
function handler2() {
$(this).on('hover').one("click", handler1);
}
$("#navbar").one("click", handler1);
Updated after OP's comment OP评论后更新
$(".nav_list li").css('display', 'none');
function animate() {
$("#navbar_inner").css({
"width": "972px",
"margin-left": "0px"
});
$(".nav_list li").delay(800).fadeIn(500);
}
function animate_off() {
$(".nav_list li").stop(true, true);
$(".nav_list li").fadeOut(1);
$("#navbar_inner").css({
"width": "70px",
"margin-left": "451px"
});
}
function handler1() {
$(this).off('hover').one("click", handler2);
}
function handler2() {
$(this).on('hover', function () {
animate();, animate_off();
}).one("click", handler1);
}
$("#navbar").one("click", handler1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.