带有更改 DIV 的 jQuery答案

【问题标题】：jQuery with changing DIV带有更改 DIV 的 jQuery
【发布时间】：2013-06-17 09:23:01
【问题描述】：

这是我的代码：

$('.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 仍然存在open 它们将关闭并且仅打开 Box1，如果单击 Box2，则 Box1 和 Box3 将保持 Closed 状态，依此类推。

这个页面上只有 3 个盒子。

【问题讨论】：

请发布一些标记，如果可能，请在 jsfiddle.net 上设置一个示例
同时搜索this的用法:)
请粘贴您的html代码
如果你想制作手风琴，你可以看看这个：jsfiddle.net/hungerpain/476Nq这可能对你有帮助..

标签： jquery

【解决方案1】：

我建议你试试这个：

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

【讨论】：

【解决方案2】：

试试看，

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

......

【讨论】：

非常感谢你们 :)

【解决方案3】：

您可以在您的盒子中添加一个通用类，例如box，然后执行以下操作，

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

    //Do something else with the element
});

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

最好的方法是关闭所有盒子，然后打开你想要的盒子。如果您为所有框使用一个类来展开/关闭框，则更好。

您的 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');
   });
})

【讨论】：