具有更改的DIV的jQuery

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

我建议你试试这个：

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

Answer 3

您可以向框中添加一个泛型类，比如box，然后执行以下操作：

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

    //Do something else with the element
});