JQuery с изменением DIV

Question

Вот мой код:

$('.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 останутся закрытыми и так далее.

На этой странице всего 3 коробки.

Answer 1

Попробуй, как,

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

...... 

Answer 2

Вы можете добавить общий класс для ваших коробок, скажем box, а затем выполните следующие действия,

$(".box").click(function(){ 
    $(".box").hide(); 
    $(this).slideDown('slow'); 

    //Do something else with the element 
}); 

Answer 3

Добавьте класс .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'); 
}); 

Answer 4

Лучший способ сделайте это рядом со всем полем, а затем откройте окно, которое вы хотите. Лучше, если вы используете класс для всех своих ящиков для расширения/закрытия ящиков.

Ваш HTML должен выглядеть так:

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

Где открыт будет класс триггера.

$(document).ready(function(){ 
    $('.open').click(function() { 
     $('.open').fadeOut('slow'); 
     $(this).fadeIn('slow'); 
    }); 
})  

Answer 5

Я предлагаю вам попробовать это одно:

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