Question

我有一些代码;

(function($) {

    $('nav.top ul li').hover(function() {

        $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>');

    });
})(jQuery);

与...结合使用效果很好;

    <nav class="top">
        <ul>
            <li>
                <a href="index.php">Home</a>
            </li>
            <li>
                <a href="events.php">Events</a>
            </li>
            <li>
                <a href="marketingguidance.php">Marketing</a>
            </li>
            <li>
                <a href="news.php">News</a>
            </li>
            <li>
                <a href="salestoolkit.php">Sales</a>
            </li>
        </ul>
    </nav>

但是我遇到了一个问题，当我鼠标移除时，我不确定删除或分离.active和两个span类的最佳方法是什么。

我尝试添加$(this).remove()，但这是从dom中删除列表项。

如何删除原始代码中添加的效果（addClass（），append（）和prepend（））？

提前致谢..

Answer 1

在mouseout上试试

$(this).removeClass("active").children("span").remove();

jsFiddle

Answer 2

也许您可以使用mouseover()和mouseout()代替hover()，并尝试使用以下内容：

$('nav.top ul li').mouseover(function() {
    $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>');
});

$('nav.top ul li').mouseout(function() {
    $(this).removeClass('active').children("span").remove();
});

Answer 3

如果标签中没有任何其他范围，您可以通过添加如下所示的mouseleave处理程序来完成.hover参数：

$('nav.top ul li').hover(
    function() {
        $(this).addClass('active')
               .append('<span class="rightImage"></span>')
               .prepend('<span class="leftImage"></span>');

    },
    function() {
        $(this).removeClass('active').children("span").remove();
    }
);

请参阅hover了解有关参数的更多信息。

编辑： hover（fn1，fn2）只是调用.mouseenter（fn1）.mouseleave（fn2）

的语法糖

删除动态添加的元素

3 个答案: