toggle - 如何使用多个 div 切换 div 内容？

Question

我想使用两个不同的 div切换我的内容。如果我单击带有“打开”类的 div，这个打开的内容并关闭内容，我单击带有“关闭”类的单独 div。

<div class="open"></div>
<div class="close"></div>

<div id="contents"></div>

我怎样才能做到这一点？

这是我的脚本：

$('.open').toggle(function(){
    $('#contents').hide();
    $('.wrapper').animate({'width':'200px'}).end().find('.content').animate({ 'right': '30px' }) 
}, 
function() {
    $('#contents').show();      
    $('.wrapper').animate({'width':'40px'}).end().find('.content').animate({ 'right': '0' })    
});

谢谢！

Answer 1

您可以将单击事件处理程序绑定到单独的元素

$('div.open').click(function(){
   // your open code here
});
$('div.close').click(function(){
   // your close code here
});

Answer 2

用 2 次点击功能将它们分开

$('.close').click(function(){
    $('#contents').hide();
    $('.wrapper').animate({'width':'200px'}).end().find('.content').animate({ 'right': '30px' }) 
});
$('.open').click(function() {
    $('#contents').show();      
    $('.wrapper').animate({'width':'40px'}).end().find('.content').animate({ 'right': '0' })    
});

Answer 3

$(".open").click(function() {
    $("#contents").show();
});

$(".close").click(function() {
    $("#contents").hide();
});