如果div可见，则单击时无法交换图像

john 发表于 Dev

约翰

我正在尝试交换图像，如果#filters是可见的，但它不起作用，控制台中没有错误...

$(document).ready(function(){
  $("#filter-options :checkbox").click(function(){
    $("#product-list li").hide();
    $("#filter-options :checkbox:checked").each(function(){
      $("." + $(this).val()).fadeIn();
    });

    if($('#filter-options :checkbox').filter(':checked').length < 1){
      $("#product-list li").fadeIn();
    }
  });

  $('.col').on('click', function(){

    $('#filters').slideToggle(200);

    if($('#filters').is(':visible')){
      $('.col').attr('src','http://www.asus.com/media/images/close_round.png');
    }

    else{
      $('.col').attr('src','http://www.asus.com/media/images/open_round.png');
    }

  })
});

http://jsfiddle.net/594yj9uL/9/

阿伦·约翰尼

这是因为slideToggle（）的情况，如果是slideToggle()，则需要使用complete回调选项检查动画的可见性和结尾

$('.col').on('click', function () {

    $('#filters').slideToggle(200, function(){
        console.log($(this).is(':visible'))
        if ($(this).is(':visible')) {
            $('.col').attr('src', 'http://www.asus.com/media/images/close_round.png');
        } else {
            $('.col').attr('src', 'http://www.asus.com/media/images/open_round.png');
        }
    });
})

演示：小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。