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(){
                    $(".content1").animate({width:'0%'});
                    $('.content').animate({width:'42%'});
                }, 
                function(){ 
                     $('.content').animate({width:'0%'});
                });

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

Answer 2

这应该可以解决问题...

为您的内容使用通用类，并添加一个额外的类，使内容“独特”

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

Answer 3

你在找这个吗？随着 htmL 的轻微变化，您可以实现这一目标..

HTML：

<ul id="vertical">
    <li class="one"></li>
    <li class="content"></li>
    <li class="one"></li>
    <li class="content"></li>
</ul>

jQuery：

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

http://jsfiddle.net/writetobhuwan/DDSu2/1/

Answer 4

我建议将功能与样式分开并使用通用解决方案，这样您就可以通过添加第三张幻灯片来扩展它。

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/