Question

我创建了一些东西，点击一个div /按钮，它会打开一个单独的div及其内容。我希望在点击其中一个按钮div后关闭或滑动所有非目标项目。

长话短说，我一次只打开1'target-div'。我该如何做到这一点？（链接到代码下面的小提琴）

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));

  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideDown();    

 if($target.is(':visible')){
  $(this).removeClass('selected');
  $target.slideUp('normal').removeClass('open');
  return false;
 }  
});

http://jsfiddle.net/dNU92/8/

Answer 1

根据你的小提琴，添加一个slideUp（）

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));
  $('.target-div').slideUp();
  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

  if($target.is(':visible')){
      $(this).removeClass('selected');
      $target.slideUp('normal').removeClass('open');
      return false;
  }  
});

Answer 2

以下代码执行您想要的操作 - 隐藏在您单击另一个时打开的其他div。

$('.target-div').hide();
$('.button').click(function () {
    var $target = $('#div' + $(this).data('target'));

    $(this).addClass('selected').siblings().removeClass('selected');
    $target.delay(300).slideToggle();    


    if($target.is(':visible')){
        $(this).removeClass('selected');
        $target.slideUp('normal').removeClass('open');
        return false;
    }
    else
    {  
        $('.target-div:visible').not($(this)).removeClass('open').slideUp();
    }
});

这里唯一的补充是：

$('.target-div:visible').not($(this)).removeClass('open').slideUp();

这是您更新的JSFiddle

Answer 3

更改你的jquery如下...

更新小提琴：http://jsfiddle.net/dNU92/12/

添加如下行：$(".target-div:visible").hide()

$('.target-div').hide();
$('.button').click(function () {
  var $target = $('#div' + $(this).data('target'));
  $(".target-div:visible").hide() /// this is the line i have added
  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

  if($target.is(':visible')){
      $(this).removeClass('selected');
      $target.slideUp('normal').removeClass('open');
      return false;
  }  
});

Answer 4

您必须在点击内执行操作以隐藏可见元素。这个动画效果很好：

$('.target-div').hide();
$('.button').click(function () {
    $('.target-div:visible').slideUp('normal', function(){ $(this).hide(); });

    var $target = $('#div' + $(this).data('target'));

  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

  if($target.is(':visible')){
      $(this).removeClass('selected');
      $target.slideUp('normal').removeClass('open');
      return false;
  }  
});

我使用this Fiddle。

Answer 5

$('.target-div').hide();
$('.button').click(function () {

    var $target

    for (var i=1; i<9; i++){
        $target = $('#div' + i);
        $target.slideUp('normal').removeClass('open');   
    }
   $target = $('#div' + $(this).data('target'));

  $(this).addClass('selected').siblings().removeClass('selected');
  $target.delay(300).slideToggle();    

  if($target.is(':visible')){
      $(this).removeClass('selected');
      $target.slideUp('normal').removeClass('open');
      return false;
  }  
});

这样的事情？

jQuery一次显示/隐藏1个

5 个答案:

以下代码执行您想要的操作 - 隐藏在您单击另一个时打开的其他div。