jQuery一次显示/隐藏1个

我已经创建了一些东西，单击一个div/按钮，它会打开一个单独的div及其内容。我希望所有的非目标项目关闭或幻灯片上点击按钮div之一

长话短说，我希望一次只打开一个“目标分区”。我如何做到这一点？（代码下方链接到小提琴）

---

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

下面的代码执行您想要的操作—在单击另一个div时隐藏打开的其他div。 这里唯一增加的是：

$（'.target div:visible'）。不（$（this））.removeClass（'open'）.slideUp（）

这是您更新的
更改jquery，如下所示

更新小提琴：

添加一行，如：
$（“.target div:visible”）.hide（）

您必须在单击中执行操作以隐藏可见元素。这个动画效果相当不错：

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

我使用了。
$（'.target div'）.hide（）；
$（'.button'）。单击（函数（）{
var$目标
for（var i=1；这正是我在第二次单击按钮时保持项目关闭所需的。谢谢！！！Hey@rymill2-在这里作为一个额外选项，您可能会注意到，在单击slideUp（）时几乎立即发生：您可以在此处设置延迟，使其等待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;
  }  
});

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

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

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