如果 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')); 它总是 returns 错误。

Answer 1

您应该在 slideToggle 动画停止后更改图标。您可以在 callback 中这样做：

$(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");
        }
    });
});

Answer 2

尝试在完成幻灯片切换后更改图像：请参阅此处：http://api.jquery.com/slidetoggle/

$(document).ready(function(){
 var pull = $('#mmTrigger');
 menu = $('.ulMM');
 menuHeight = menu.height();

 $(pull).on('click', function(e) {
    e.preventDefault();
      menu.slideToggle("slow", function() {
      alert( ! menu.is(":visible") );
     if (! menu.is(":visible")) {
          $(".imgMenu").attr("src", "https://maps.google.com/mapfiles/kml/shapes/schools_maps.png");// icons added to show demo use your own icons.
      } else {
          $(".imgMenu").attr("src", "http://labs.google.com/ridefinder/images/mm_20_black.png");
      }
      });
  });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="https://maps.google.com/mapfiles/kml/shapes/schools_maps.png" class="imgMenu" /></div>
    </div>

如果 DIV 未隐藏，如何切换图像

How to switch image if DIV is not hidden

javascript

jquery

html