Question

当有一个使用.hide和.show进行div隐藏或显示的切换时，我有一个脚本当有if语句仅在显示div时发生时，我需要创建另一个脚本。

这是脚本：

<script type="text/javascript">
  $(document).ready(function() {
  $('#click1').toggle(function(){
    $('#div1').show().animate({'height': '50%'}, 400);
  }, function(){
    $('#div1').animate({'height': '0px'}, 400).hide(0);
  });
  });
</script>

我需要添加这样的if语句：

<script type="text/javascript">
  $(document).ready(function() {
  $('#click1').toggle(function(){
    if (div2==show)
    {
      $('#div2').animate({'height': '0px'}, 400).hide(0);
    }
    $('#div1').show().animate({'height': '50%'}, 400);
  }, function(){
    $('#div1').animate({'height': '0px'}, 400).hide(0);
  });
  });
</script>

感谢

Answer 1

根据@mplungjan和@Frexuz的建议更新了处理visibility和0 height的代码：

var div2 = $('#div2');
if (div2.is(':visible') && div2.height() > 0) {
    $('#div2').animate({'height': '0px'}, 400).hide(0);
}

Answer 2

你想在显示一个div时隐藏另一个div，对吗？

无需添加if语句，只需将类.content提供给所有内容div并隐藏它。

*您还可以使用slideUp和slideDown代替动画。

检查演示http://jsfiddle.net/yeyene/8JQXB/1/

JQUERY

$(document).ready(function () {
    $('.link').on('click', function () {
        $('.content').slideUp(500);
        $('div#' + $(this).attr('target')).css({
            'height': '50%'
        }).slideDown(500);
    });
});

HTML

<a class="link" target="div1">Click1</a><br />
<div id="div1" class="content">Div 1 content</div>
<a class="link" target="div2">Click2</a><br />
<div id="div2" class="content">Div 2 content</div>
<a class="link" target="div3">Click3</a><br />
<div id="div3" class="content">Div 3 content</div>

表示if语句中的hide / show值

2 个答案:

JQUERY

HTML