Question

我有一个可以使用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。

Answer 1

在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，然后过上幸福的生活。

在悬停时更改文本并替换为原始文本

1 个答案: