1

我有一个可以使用 jQuery 打开和关闭的 div。悬停时链接文本需要更改，因此如果 div 打开，文本将显示“关闭”，反之亦然。但是，我不知道如何在鼠标悬停时将链接文本返回到其原始值（例如，在示例 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?
});

编辑：我到达的解决方案在这里。

4

1 回答 1

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 并从此过上幸福的生活。

于 2013-09-17T21:22:42.163 回答