0

我创建了一些东西，在单击 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/

4

5 回答 5

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;
  }  
});
于 2013-02-01T14:18:08.503 回答
1

以下代码执行您想要的 - 隐藏在您单击另一个 div 时打开的其他 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

于 2013-02-01T14:18:19.630 回答
0

如下更改您的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;
  }  
});
于 2013-02-01T14:18:54.937 回答
0

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

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

我用了这个 Fiddle。

于 2013-02-01T14:26:20.740 回答
0 
$('.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;
  }  
});

像这样的东西？

于 2013-02-01T14:35:42.340 回答