的Javascript jQuery的一個觸發切換多個div

我已經閱讀了很多類似的問題，但是我無法找到我的答案...... 用下面的代碼，我可以打開和關閉我的圖表：的Javascript jQuery的一個觸發切換多個div

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6> 
    <div id="Chartspace3" class="toggle-container"></div>

我希望做的是，當「圖3」被點擊時，以下兩個申報單顯示，像這樣：

<h6 class="toggle-trigger"><a href="#">Chart 3</a></h6> 
    <div id="PassOptionSelection" style="display: none; margin-top: 20px"> </div> 
    <div id="Chartspace3" class="toggle-container"></div>

但似乎只能用「肘節進行切換的div之一觸發「鏈接...

這裏是我的JS：

$(".toggle-container").hide(); 
$(".toggle-trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow"); 
    return false; 
});

[編輯]

這裏是我的HTML的一個更大的樣本：

<h6 class="toggle-trigger"><a href="#">Nombre d'Appels par Passerelle</a></h6> 
<div class="toggle-container" id="Chartspace1" style="width: 800px; height: 300px; margin-bottom: 10px"></div> 

<h6 class="toggle-trigger"><a href="#">Pourcentage d'Appels par Utilisation de Passerelle</a></h6> 
<div class="toggle-container" id="Chartspace2" style="width: 800px; height: 300px; margin-bottom: 10px"></div> 

<h6 class="toggle-trigger"><a href="#">Classification des appels par types</a></h6> 
<div id="PassOptionSelection" style="display: none; margin-top: 20px"> </div> 
<div id="Chartspace3" class="toggle-container" style="width: 800px; height: 800px; margin-bottom: 10px;"></div>

這工作得很好，除了其中只有形式將顯示部分在第三個切換鏈接上，圖表保持隱藏狀態...

來源

2011-11-10 sebastien leblanc

最簡單的事情就是將所有你想要顯示的div包裹起來，然後隱藏並顯示div，而不是隱藏和顯示單個div。

<div id="trigger">Trigger</div> 
    <div id="container"> 
     <div id="box1">Box 1</div> 
     <div id="box2">Box 2</div> 
    </div>

然後，你可以隱藏或顯示#container的盒子，裏面也隱藏/顯示框1和框2

另一種簡單的選擇是一類添加到您想要的div進行切換（即切換，這一點），然後像做：

$(".toggle-trigger").click(function() { 
    $('.toggle-this').toggle(); 
    return false; 
    });

另一種方式（儘管我喜歡少，因爲它更容易破）是隻獲得下兩個div：

$(".toggle-trigger").click(function() { 
    $(this).next('div').toggle().next('div').toggle(); 
    return false; 
    });

在我看來，這是一個壞主意，因爲如果你要添加或刪除其他div，它會打破並隱藏你不想隱藏的div。

最後，最準確的解決方案是明確地隱藏/顯示基於ID的這些div，像這樣：

$(".toggle-trigger").click(function() { 
    $('#PassOptionSelection').toggle(); 
    $('#Chartspace3').toggle(); 
    return false; 
    });

我懷疑這最後一個是不是一種選擇，因爲你可能有多個圖表在具有各種ID的頁面上。

我的建議是去我的前兩個選項之一。

祝你好運。

來源

2011-11-10 17:43:56 Jemaclus

謝謝:)我去了你的最後一個選項，但我沒有編寫所有圖表的代碼，只有一個案例是兩個div需要顯示...其餘的是由我之前的那段代碼。 –

怎麼樣？

~~$（「切換觸發。」）點擊（函數（）{$ （本）.toggleClass（「活動」）的孩子（「格」）的slideToggle（「慢」）;。返回false; }）;~~

對不起......腦屁...... DIV標籤不是H6標籤的孩子。我很抱歉......我應該更仔細地看看你的示例代碼。

$(".toggle-trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow").next().slideToggle("slow"); 
    return false; 
});

可能工作，但它是醜陋的。我認爲Jemaclus關於將兩個DIV元素包含在容器DIV中的建議是更清潔/更好的解決方案。

來源

2011-11-10 17:24:38 Jason

如果我改變「下一個（）」到「找（」格「）」觸發器會停止工作全在一起... –

「的孩子（」格「）」沒有按似乎也沒有工作...我只是離開了「股利」是正確的？我不需要將其更改爲我的div的ID？ –

謝謝你的回答:) –

我有點困惑，但是如果我正確地理解了你想要顯示的div不是一個不屬於被點擊的.toggle觸發器的孩子。這就是爲什麼next（）會工作，但.find（'div'）不會。也可能不是你元素的直接兄弟。你可以使用像

$(this).toggleClass('active').next('.toggle-container').slideToggle('slow');

來源

2011-11-10 17:49:20 karnyj

的Javascript jQuery的一個觸發切換多個div

回答

相關問題