3

有人可以帮我解决这个代码吗，如果你知道怎么做，我认为它很容易..？

当前单击以切换框出现在下面。

我需要它，所以当您单击另一个切换按钮时，当前打开的框会关闭，因此它们基本上不可能同时打开？

但是您仍然可以正常切换每个单独的打开/关闭，就在它打开时另一个（如果打开）也关闭。

到目前为止.. 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");
});
4

5 回答 5

3

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

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

参见 jsFiddle 演示

于 2012-06-26T12:10:59.377 回答
0

这是我对这个问题的解决方案：

$(".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/

于 2012-06-26T11:37:45.843 回答
0

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

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

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

于 2012-06-26T11:27:09.900 回答
0

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

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

现场示例：http: //jsfiddle.net/CkTRa/389/

于 2012-06-26T11:24:39.887 回答
0

更好的方法是：

jsFiddle 演示

  • 您可以有 2 个以上的标题。
  • 它切换已经打开的
  • 如果再次单击它只会关闭打开的那个

jQuery：

$('.trigger').next('.toggle').hide();
$('.trigger').click(function() {
    var el = $(this).next('.toggle');
    var doit = el.is(':visible') ? el.slideUp() : ($('.toggle').slideUp()) (el.slideDown());
});
于 2012-06-26T11:44:59.543 回答