Question

有人可以帮我解决这个问题，如果你知道怎么做，我会认为它很简单吗？

目前点击切换框出现在下方。

我需要它，所以当你点击另一个切换时，当前打开的框关闭，所以它们基本上不可能同时打开？

但你仍然可以正常地打开/关闭每个人，只要打开另一个人（如果打开）也会关闭。

到目前为止.. http://jsfiddle.net/CkTRa/380/

谢谢。

更新：

它可以用于定位独立的框，如此...？

HTML：

<div>
<h3 class = "trigger"> <a href="#box1">Heading 1</a></h3> 
</div>
<div>
<h3 class = "trigger"><a href="#box2">Heading 2</a></h3>
</div>

<div class = "toggle" id="box1">
    box one content
</div>
<div class = "toggle" id="box2">
    box two content
</div>

jQuery到目前为止：

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle("slow");
});

Answer 1

我认为这个简单的代码应该可以正常运行

$(".trigger").click(function(){
    $(".trigger").not(this).next(".toggle").slideUp("slow");
    $(this).next(".toggle").slideToggle("slow");
});

See jsFiddle demo

Answer 2

最简单的方法是在打开的类中添加一个类，并使用该类定位打开的类一。例如，您可以在打开时添加类open，并使用选择器.open关闭已打开的类：

$(".trigger").click(function(){
    $('.open').slideToggle('slow').toggleClass('open');       
    $(this).next(".toggle").toggleClass('open').slideToggle("slow");
 });

实例：http://jsfiddle.net/CkTRa/389/

Answer 3

这是一个解决方案：当您单击一个时，首先关闭所有（如果有），然后打开您单击的那个：

$(".trigger").click(function(){
  $(".trigger").next(".toggle").slideUp("slow");
  $(this).next(".toggle").slideDown("slow");
});

唯一的缺点是如果你再次点击打开它，你将关闭它并重新打开它，但我不确定这是否会影响你的功能。

Answer 4

以下是我对此问题的解决方案：

$(".trigger").click(function() {
    $(this).addClass('current');
    $('.trigger:not(.current)').next(".toggle").slideUp('slow');
    $(this).removeClass('current').next(".toggle").slideToggle("slow");
});

http://jsfiddle.net/paragnair/CkTRa/391/

<强>更新以下示例确保您单击的标题仅在其他标题滑动后才会滑动。

$(".trigger").click(function() {
    var currentTrigger = $(this);            
    currentTrigger.addClass('current');
    $('.trigger:not(.current)').next(".toggle").slideUp('slow', function(){
        currentTrigger.removeClass('current').next(".toggle").slideToggle("slow");
    });
});

http://jsfiddle.net/paragnair/CkTRa/392/

Answer 5

更好的方法是：

jsFiddle demo

您可以有两个以上的标题。
切换已打开的
如果再次点击则关闭已打开的

jQuery的：

$('.trigger').next('.toggle').hide();
$('.trigger').click(function() {
    var el = $(this).next('.toggle');
    var doit = el.is(':visible') ? el.slideUp() : ($('.toggle').slideUp()) (el.slideDown());
});

当其他打开时，切换盒关闭？

5 个答案:

jsFiddle demo