jquery顯示/隱藏多個div（通過ID）與圖標切換

Question

我試圖讓一些jQuery的工作，我知道（嗯，認爲），我接近基於我發現的信息的解決方案this question。

基本上我想要的是在頁面上有多個加/減圖標，點擊時會切換圖標並根據ID值顯示特定的DIV。

看下面這個例子，DIV中的內容將被隱藏，直到點擊圖標。點擊後，加號圖標變爲減號圖標。如果點擊了減號圖標，內容將再次隱藏。應該允許多個DIV同時顯示，因此幾乎每個切換都應該是獨立的。

<div><a href="#" id="content1">[Plus Icon]</a> Content Title</div> 
<div id="content1">This is some content. Really exciting content!</div> 

<div><a href="#" id="content2">[Plus Icon]</a> Different Content</div> 
<div id="content2">Here is more content. This content is less exciting.</div> 

注[......如果有可能是一個「顯示/隱藏所有」鏈接，這將是真棒！]：在我上面的例子中，顯示是正確的鏈接下方的div但情況並非總是如此。有時候，切換鏈接處於不同的位置。

正如您所看到的，我希望能夠在切換鏈接中指定一個ID，以便將DIV隱藏顯示。

而且，如果顯示/隱藏可以使用滑動效果進行動畫，那就太好了。

我從其他問題找到的兩個腳本幾乎都是我想要的，除了它們只涉及一個DIV並且沒有我描述的ID類型系統。

腳本感謝：維陶布特庫斯

Fiddle

$(document).ready(function(){ 


    $(".slidingDiv").hide(); 

    $('.show_hide').click(function(){ 
     $(".slidingDiv").slideToggle(); 
     var isShow = $(this).text() == 'Show'; 
     $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'}); 
    }); 

}); 

.show_hide{ 
    background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat; 
    padding-left:20px; 
} 

<a href="#" class="show_hide">Show</a> 

<div class="slidingDiv" style="display: block;"> 
Check out 
</div> 

腳本感謝：羅克森

Fiddle

注：他的劇本切換文本爲好，這我不真的很想。

$(document).ready(function(){ 


    $(".slidingDiv").hide(); 

    $('.show_hide').click(function(){ 
     $(".slidingDiv").slideToggle(); 
     var isShow = $(this).text() == 'Show'; 
     $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'}); 
    }); 

}); 

.show_hide{ 
    background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat; 
    padding-left:20px; 
} 

<a href="#" class="show_hide">Show</a> 

<div class="slidingDiv" style="display: block;"> 
Check out 
</div> 

非常感謝您的幫助！一如既往，非常感謝！

Answer 1

如果我理解正確，您要查找的是指定特定div以顯示/隱藏給定按鈕的方法。這個實現可能會有所不同，具體取決於您如何構建要顯示和隱藏的div，但這裏有一個可能的解決方案。

在顯示/隱藏按鈕上添加一個屬性。不管它是什麼，我可以稱之爲targetElement什麼的。所以你最終會得到<a targetElement="content1" href="#" id="content1">[Plus Icon]</a>。

然後，當將click事件處理程序附加到此元素時，傳遞事件。所以像這樣 - ('.show_hide').click(function(event){。然後，處理函數裏面，你可以得到目標DIV這樣的名字 - var target_id = $(event.target).attr("targetElement")，然後顯示/直接隱藏它，像這樣 - #(("#" + target_id)).show();

同樣，你去究竟這個可以因您的確切的設置和實現 - 這是一個非常具體的問題 - 但希望這個解決方案能夠工作，或者至少通過提供一個將數據傳遞給事件處理程序的例子來指出正確的方向。

Answer 2

我想在評論中說這個，但我還沒有得到它的代表。

我看到你有2次相同的ID。這將在javascript中產生衝突：

<a href="#" id="content1"> 
<div id="content1"> 

<a href="#" id="content2"> 
<div id="content2">