带更改DIV的jQuery

这是我的密码：

$('.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个框。

您可以向框中添加泛型类，例如

box

，然后执行以下操作

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

    //Do something else with the element
});

---

将class.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'); 
});

---

最好的方法是关闭所有的盒子，然后打开你想要的盒子。如果对所有框使用类来展开/关闭框，效果会更好

您的HTML应该如下所示：

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

试试看

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

......

---

我建议你试试这个：

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

---

请发布一些标记，如果可能的话，在jsfiddle.netsearch上设置一个示例，搜索

这个
用法：）请粘贴你的html代码如果你想制作手风琴，你可以看看这个：这可能对你有帮助..非常感谢大家：）
$('[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);
});