jQuery 切换打开/关闭 div答案

【问题标题】：jQuery toggle open/close div'sjQuery 切换打开/关闭 div
【发布时间】：2011-06-23 07:58:25
【问题描述】：

我目前有一个包含 3 个链接的菜单，它打开隐藏的 div 与自身相关的内容并使用此 jquery 代码（见下文），但希望如果一个 div 在打开第二个 div 时打开，它会关闭原始打开的 div ...

即如果“foobox”打开，然后用户点击“foo2”打开“foobox2”，“foobox”将关闭

$('#foo').toggle(function(){
 $('#foobox').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox').animate({marginLeft: '0'}, 1000);
});

$('#foo2').toggle(function(){
 $('#foo2box').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

$('#foo3').toggle(function(){
 $('#foobox3').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

像往常一样提前谢谢你。

【问题讨论】：

标签： jquery toggle jquery-animate

【解决方案1】：

当您打开一个时，向它添加一个新类，表明它是活动的。并且每次打开某个东西时，关闭活动的那个。

$('#foo').toggle(function(){
    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox').animate({marginLeft: '354'}, 1000).addClass('active');
    },
 function(){
    $('#foobox').animate({marginLeft: '0'}, 1000).removeClass('active');
});

另外，我建议您更改 HTML 和 jQuery，这样您只需要一个事件处理程序。例如，而不是这个：

<div id="foo">Link</div>
<div id="foobox">Content</div>

<div id="foo2">Link</div>
<div id="foobox2">Content</div>

你可以这样做：

<div class="foo" data-target="1">Link</div>
<div id="foobox-1">Content</div>

<div class="foo" data-target="2">Link</div>
<div id="foobox-2">Content</div>

使用以下 jQuery：

$('.foo').toggle(function(){

    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox-'+$(this).data('target')).animate({marginLeft: '354'}, 1000).addClass('active');

},function(){

    $('#foobox-'+$(this).data('target')).animate({marginLeft: '0'}, 1000).removeClass('active');

});

【讨论】：

这就是我在谢谢你之后的样子，虽然我可以让它在 jfiddle 上正常工作，但不能在我的脚本中......我认为我不得不玩一点，再次感谢。
我不认为是这样，但您是否有可能使用不接受.data() 的过时版本的 jQuery？你有任何错误吗？通过使用console.log('test') 和例如 Firebug 中的控制台，您应该能够找出脚本中哪里出错了。
我使用的是较旧的 jquery 版本（1.4.2），再次感谢现在完美工作:)

【解决方案2】：

将类 foo 添加到所有 foo 元素（#foo、#foo2、#foo3..）还将类 foobox 添加到所有 foobox 元素（#foobox、#foobox2、#foobox3..）并使用它：

$('.foo').live('click', function () {
if (!$(this).next().is(':visible')) {
$('.foobox').hide();
$(this).next().slideToggle();
if ($(this).next().is(':visible')) {
    //DoSomething
}
}
//DoSomething }
});

【讨论】：

这是一个比我更好的解决方案，但请注意，它只有在每个 foobox 都在其相关的 foo 后面时才有效。如果所有foo 与所有foobox 都位于一个单独的div 中，则它将不起作用。

【解决方案3】：

使用诸如class="special" 之类的类，然后在打开当前类之前使用 jQuery 在该类上设置关闭或反向动画操作，以便关闭该类的所有菜单并打开当前菜单。

假设你的 html 是

<div id="foo" class="menu">
    <div id="foobox" class="special"></div>
</div>
<div id="foo2" class="menu">
    <div id="foo2box" class="special"></div>
</div>
<div id="foo3" class="menu">
    <div id="foobox3" class="special"></div>
</div>

而jQuery会如下

$('.special').live('click',function(){
    $('#foo').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

    $('#foo2').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foo2box').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foo2box').animate({marginLeft: '0'}, 1000);
    });

    $('#foo3').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox3').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox3').animate({marginLeft: '0'}, 1000);
    });
});

Example on JSFIDDLE.net

【讨论】：

【解决方案4】：

$('#foobox').animate({marginLeft: '354'}, 1000).data( 'open', true );

每次打开 div 时都给一个数据，然后每次打开 div 时还要检查所有其他 div 是否有.data('open') == true，如果是，则表示它们已打开，因此关闭它们并删除该数据值。

编辑

您还可以将打开的元素存储到变量中，例如：

$('#foobox').animate({marginLeft: '354'}, 1000);
$opened_element = $('#foobox');

然后，当您打开另一个盒子时，只需关闭 $opened_element。可能它必须是一个全局变量，给你的代码。

【讨论】：

【解决方案5】：

我相信你所说的功能在http://docs.jquery.com/UI/Accordion中有介绍

【讨论】：