Question

我有一个页面，其中包含使用slideUp（）和slideDown（）显示/隐藏div的按钮。以前我只是使用hide（）和show（）来显示和隐藏这些div，但我真的想使用幻灯片动画，因为它可以帮助用户看到页面上的变化。

问题在于：其中一些div存在于其他div中，有时也会隐藏，似乎当隐藏父div时，slideUp（）将无法对子进行处理。

这是一个粗略的例子：

＆＃13;

$('#Abutton').unbind('click').click(function(){
			$('.A').slideToggle(500);
			});

$('#Cbutton').unbind('click').click(function(){
			$('.C').slideToggle(500);
			});

$('#Bbutton').unbind('click').click(function(){
			$('.B').slideToggle(500);
			});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>

<div class='context1'>
  <div class="A">
      <p>Parent</p>
      <div class='C'>
      <p> and child </p>
      </div>
  </div>
</div>

<div class='context2'>
  <div class="B">
     <p> something else </p>
  </div>
</div>

＆＃13;

在此示例中，如果用户切换关闭＆＃34; A，＆＃34;然后切换关闭＆＃34; C，＆＃34; C没有成功隐藏，因为它隐藏在隐藏的父级中 - 所以当用户重新打开A时，即使用户刚关闭它，也会显示C.它似乎没有成功隐藏，因为动画效果在它不可见（？）时无法执行。

同样，当我用show（）和hide（）替换toggle函数时，它工作正常，但我真的需要动画效果。

我能找到的唯一解决方案是在slideUp完成后使用setTimeout执行以下操作...

$('.C').slideUp(500);
        setTimeout(function(){ $('.C').hide() }, 500);

...但我想知道是否有人知道更简单的解决方案。提前感谢您分享的任何见解！

编辑：我意识到这有点难以解释，我可能没有做好解释自己的工作;这是我想要按顺序发生的事情：

用户关闭A.在这一个实例中，A包含C，因此两者都是隐藏的，但可能存在C不是子的其他实例。
用户关闭C。
当A重新打开时，C关闭。

Answer 1

有回调功能，在动画结束时触发

var $c =  $('.C');
$c.slideUp(500, function(){
  $c.hide(
});

Answer 2

也许这个：

＆＃13;

  $('#Abutton').click(function(){
    if($('.A').is(':visible')){
        if($('.C').is(':visible')){
             $('.C').slideUp(500,function(){
                 $('.A').slideUp(500);
             });
         }else{
             $('.A').slideUp(500);
         }
     }else{
         $('.A').slideDown(500,function(){
             $('.C').slideDown(500);
         });
     }

    
  });

  $('#Cbutton').click(function(){
		if($('.A').is(':visible')){
			   $('.C').slideToggle(500);
		}else{
              $('.A').slideDown(500,function(){
              	      $('.C').slideDown(500);
              });
		}


  });

    $('#Bbutton').click(function(){
			$('.B').slideToggle(500);
	});

＆＃13;

     div{
     	margin: 10px;
     	border-style:solid;
     	border-width:1px;
     }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>


<div class='context1'>
  <div class="A">
      <p>Parent</p>
      <div class='C'>
      <p> and child </p>
      </div>
  </div>
</div>

<div class='context2'>
  <div class="B">
     <p> something else </p>
  </div>
</div>

＆＃13;

JQuery：SlideUp隐藏父级内的div

2 个答案: