jQuery切換打開/關閉div的

我目前有一個菜單包含3個鏈接，它打開隱藏div的相關自己並使用此jquery代碼（見下文），但希望它，如果div是aready打開時，第二個div打開其關閉原來打開的div ...jQuery切換打開/關閉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); 
});

照常謝謝提前。

來源

2011-06-23 Dizzi

當你打開一個，添加一個新的類，它表明它是活動的。每次你打開一些東西，關閉活動的東西。

$('#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'); 

});

來源

2011-06-23 08:01:28 Kokos

這是林後謝謝你，但我可以讓它工作在jfiddle罰款但不在我的腳本....將不得不圍繞我玩一玩，再次感謝。 – Dizzi

我不認爲這是它，但它可能是你使用過時的版本的jQuery不接受'.data（）'？你有什麼錯誤嗎？通過使用'console.log（'test'）'和一個控制檯，例如Firebug，你應該能夠找出你的腳本中哪裏出了問題。 – Kokos

我使用的是較舊的jQuery版本（1.4.2），再次感謝您的工作:) – Dizzi

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

每次打開一個div時間給一個數據，那麼每次你打開一個div也檢查是否所有其他div有.data('open') == true，如果是這樣你就意味着它們是開放的，so clos e他們並刪除該數據值。當您打開另一個盒子，只需關閉$ opened_element

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

然後：

編輯

您也打開的元素存儲到一個變量，等等。可能它必須是一個全局變量，然後給你的代碼。

來源

2011-06-23 08:01:41

我相信你所談論的是覆蓋在http://docs.jquery.com/UI/Accordion

來源

2011-06-23 08:01:47 odeits

的功能添加到所有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 } 
});

來源

2011-06-23 08:07:28 kleinohad

這是一個比我的更好的解決方案，但是請注意，只有每個'foobox'位於相關的'foo'後面，。如果所有'foo'都來自所有'foobox'的獨立'div'，它將不起作用。 – Kokos

使用類例如像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

來源

2011-06-23 08:30:39 LoneWOLFs

jQuery切換打開/關閉div的

回答

相關問題