Question

我目前有一个包含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);
});

像往常一样，提前谢谢你。

Answer 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');

});

Answer 2

添加到所有foo元素（＃foo，＃foo2，＃foo3 ..）类foo 还添加到所有foobox元素（#foobox，＃foobox2，＃foobox3 ..）类foobox 并使用此：

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

Answer 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

Answer 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。可能它必须是一个全局变量，但是给你的代码。

Answer 5

我相信您所谈论的功能已在http://docs.jquery.com/UI/Accordion

中介绍

jQuery切换打开/关闭div的

5 个答案: