javascript - DIV不隐藏时如何切换图像

Question

我有以下 JQuery，如果按下 DIV，它会显示一个菜单:

var pull = $('#mmTrigger');
menu = $('.ulMM');
menuHeight = menu.height();

$(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
});

HTML:

<div class="dvMain">
        <ul class="ulMM specClear">
            <li class="liMM"><a href="#" class="mmLink">Portfolio</a></li>
            <li class="liMM"><a href="#" class="mmLink">About</a></li>
            <li class="liMM"><a href="#" class="mmLink">Contact</a></li>
            <li class="liMM"><a href="#" class="mmLink">Forum</a></li>
        </ul>
        <div id="mmTrigger"><img src="nav-icon.png" class="imgMenu" /></div>
    </div>

我将脚本修改为:

    $(pull).on('click', function(e) {
     e.preventDefault();
     menu.slideToggle();
     if (menu.is(':hidden')) {
         $(".imgMenu").attr("src", "nav-icon.png");
     } else {
         $(".imgMenu").attr("src", "iconx.png");
     }
 });

但是单击 DIV 后，X 会保留下来，并且在菜单关闭后不会返回到 nav-icon.png。

如何解决该问题，以便 X 更改为菜单图标。

我添加了以下语句:alert (menu.is(':hidden'));它总是返回 false。

Answer 1

您应该在 slideToggle 动画停止后更改图标。您可以在回调中执行此操作，如下所示:

$(pull).on('click', function (e) {
    e.preventDefault();
    menu.slideToggle(function () {
        // slideToggles callback
        if (menu.is(':hidden')) {
            $(".imgMenu").attr("src", "nav-icon.png");
        } else {
            $(".imgMenu").attr("src", "iconx.png");
        }
    });
});