我有一个可以使用jQuery打开和关闭的div。链接文本需要在悬停时更改,因此如果div打开,文本将显示“关闭”,反之亦然。但是,我无法弄清楚如何在mouseout上将链接文本返回到其原始值(例如,example jsFiddle文本应该在未悬停时更改回Hello。)
有什么想法吗?
HTML:
<div>
<h4>HELLO</h4>
<p>Loads of interesting content etc</p>
<p>Loads of interesting content etc</p>
<p>Loads of interesting content etc</p>
<p>Loads of interesting content etc</p>
</div>
JS:
$("h4").click(function () {
var par = $(this).parent();
par.children("p").slideToggle(500);
if (par.hasClass("closed")) {
par.animate({
height: 180
}, 500);
};
if (!par.hasClass("closed")) {
par.animate({
height: 30
}, 500);
};
par.toggleClass("closed");
});
$("h4").hover(
function () {
if ($(this).parent().hasClass("closed")) {
$(this).html("OPEN");
} else {
$(this).html("CLOSE");
}
},
function () {
//how do I get back the original value on mouseout?
});
编辑:我到达的解决方案是here。
答案 0 :(得分:0)
在html中执行此操作:
<h4><span class="ninja">CLOSE</span><span>OPEN</span></h4>
在CSS中执行此操作:
.ninja { display:none; }
在你的JS中,在悬停(或更好的开启('mouseenter,mouseleave')事件上执行此操作
$(this).find('span').toggleClass('ninja');
这应该会产生预期的效果。
我的建议是,根本不是使用悬停事件,当点击事件触发时,然后切换类。这样它一直显示正确。
编辑:在.on()替代方案(对于鼠标输入,鼠标离开)
$('h4').on('mouseenter,mouseleave',function(){
$(this).find('span').toggleClass('ninja');
});
编辑编辑,否则你将不得不有一个.blur()事件,这看起来似乎比这里需要更多的代码。我建议用上面的.on替换你的.hover,然后过上幸福的生活。