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

Question

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

<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> 

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

Answer 1

最簡單的事情就是將所有你想要顯示的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的頁面上。

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

祝你好運。

Answer 2

怎麼樣？

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

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

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

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

Answer 3

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

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