0

これが私のコードです：

$('.expand-1').click(function(){
   $('.content-1').slideToggle('slow');
   $('.expanded-1').toggleClass('expanded-4');  
});

$('.expand-2').click(function(){
   $('.content-2').slideToggle('slow');
   $('.expanded-2').toggleClass('expanded-5');      
});

$('.expand-3').click(function(){
   $('.content-3').slideToggle('slow');
   $('.expanded-3').toggleClass('expanded-6');      
});

基本的に、ボックスをクリックするとボックスが展開されますが、次のボックスをクリックしても残りは開いたままです。私が探しているのは、(Box1) がクリックされたときに、Box2 または Box3 がまだ開いている場合にそれらが開く方法です。 Box1 のみを閉じて開きます。Box2 をクリックすると、Box1 と Box3 は Closed のままになります。

このページには 3 つのボックスしかありません。

4

5 に答える 5

1

これを試すことをお勧めします：

$('[class^="expand"]').on('click', function () {
   var klicked = this.className.slice(-1);
   var num = Math.floor(klicked)+3;
   $('[class^="content-"]').hide();
   $('[class^="content-'+klicked+'"]').slideToggle('slow');
   $(this).toggleClass('expanded'+num);
});
于 2013-06-17T09:45:37.280 に答える
0

クラス .content をすべてのコンテンツに追加し、

$('.expand-1').click(function(){
    $('.content').not($('.content-1')).slideUp('slow'); // Close all open content except 1 
    $('.content-1').slideToggle('slow');
    $('.expanded-1').toggleClass('expanded-4'); 
});
于 2013-06-17T09:27:44.110 に答える
0

最善の方法は、すべてのボックスを閉じてから、必要なボックスを開くことです。ボックスを展開/閉じるには、すべてのボックスにクラスを使用するとよいでしょう。

HTML は次のようになります。

<div class="open">
  content 1
</div>
<div class="open">
  content 2
</div>
<div class="open">
  content 3
</div>

open がトリガー クラスになります。

$(document).ready( function(){
   $('.open').click(function() {
       $('.open').fadeOut('slow');
       $(this).fadeIn('slow');
   });
})
于 2013-06-17T09:27:51.283 に答える
0

のようにしてみてください。

$('.expand-1').click(function(){
   $('.content-1').slideDown('slow');
   $('.content-2,.content-3').slideUp('fast');
   $('.expanded-1').toggleClass('expanded-4');  
});

$('.expand-2').click(function(){
   $('.content-2').slideDown('slow');
   $('.content-1,.content-3').slideUp('fast');
   $('.expanded-2').toggleClass('expanded-5');  
});

......
于 2013-06-17T09:27:53.830 に答える