jquery - 課題: パネルをクリックすると、不要なスライドが閉じます

Question

スライドをクリックすると、別のスライドが開いているかどうかを jQuery で確認して閉じます。コードの 90% を記述しましたが、何かが不足しています。以下の私のHTMLを参照してください：

これが私の 挑戦です！

//first slide
$('#one').toggle(function(){
$('.content').animate({width:'42%'});
}, function(){ 
$('.content').animate({width:'0%'}); 
});

//second slide
$('#two').toggle(function(){
$('.content1').animate({width:'42%'});
}, function(){ 
$('.content1').animate({width:'0%'});
});

//the condition ,here is the chalenge
$(function(){
$('#two').click(function(){
var two = $('.content').innerWidth();
    //when the users click the second slide i want that jquery checks if another panel           is open(in my case .content) and close it :D
});


 });

Answer 1

これでうまくいくはずです...

コンテンツに一般的なクラスを使用し、コンテンツを「ユニーク」にする特別なクラスを追加します

$('.one').toggle(function(){
  $('.content').stop().animate({{width:0});
  $('.content.one').stop().animate({width:'42%'});
}, function(){ 
  $('.content').animate({width:'0%'}); 
});

Answer 2

機能をスタイルから分離し、一般的なソリューションを使用することをお勧めします。これにより、たとえば 3 番目のスライドを追加して拡張できます。

HTML:

<ul id="vertical">
   <li class="js_slide"></li>
   <li class="content js_content"></li>
   <li class="js_slide"></li>
   <li class="content js_content"></li>
</ul>

JS:

$(".js_slide").click( function() {
    var $contentBlock = $(this).next(".js_content");

    if ( $contentBlock.hasClass("is_open") ) {
        $contentBlock.animate({width:'0%'}).removeClass("is_open");
    } else {
        // if a content box is open (=> an element with the class .is_open exists), close it
        $(".js_content.is_open").animate({width:'0%'}).removeClass("is_open");
        $contentBlock.animate({width:'42%'}).addClass("is_open");
    }

});

参照: http://jsfiddle.net/rdequ/3/