0

div/ボタンをクリックすると、別の div とその内容が開くものを作成しました。ボタン div の 1 つをクリックすると、対象外のすべてのアイテムを閉じるか、スライドアップすることを検討しています。

簡単に言うと、一度に 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 
$('.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 に答える
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 に答える