顯示/隱藏多個div：s

Question

我有兩個div：s，我希望能夠顯示和隱藏。 今天，我可以顯示並隱藏我們點擊各自鏈接的鏈接。

今天的缺點是所有div都同時打開。我想通過點擊相應的鏈接打開每個div。但是我沒有用腳本去理解它，有沒有人有任何想法？ 「

<ul> 
    <li class="toogle"><a href="#" class="show_hide" id="plus">Se fler konstnärer +</a></li> 
    <div class="slidingDiv" style="display: block;"> 
     <li><a href="#">Edvard Munch</a></li> 
     <li><a href="#">Ardy Strüwer</a></li> 
     <li><a href="#">Ari Behn</a></li> 
     <li><a href="#">Astrid Gate</a></li> 
     <li><a href="#">Cecilie Moi Sindum</a></li> 
     <li><a href="#">Vebjørn Sand</a></li> 
     <li><a href="#">Per Winge</a></li> 
    </div> 
</ul> 
<ul> 
    <li class="toogle"><a href="#" class="show_hide" id="plus">Se fler konstnärer +</a></li> 
    <div class="slidingDiv" style="display: block;"> 
     <li><a href="#">Teresa Bergerud</a></li> 
     <li><a href="#">Per Spook</a></li> 
     <li><a href="#">Cathrine Maske</a></li> 
     <li><a href="#">Gro Eriksson</a></li> 
     <li><a href="#">Johan Verde</a></li> 
    </div> 
</ul> 



$(document).ready(function(){ 
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').toggle(function(){ 
     $(".slidingDiv").slideDown(
     function(){ 
      $("#plus").text("Se färre konstnärer -") 
     } 
     ); 
    },function(){ 
     $(".slidingDiv").slideUp(
     function(){ 
      $("#plus").text("Se fler konstnärer +") 
     } 
     ); 
    }); 
}); 

Answer 1

我覺得有一個幾個原因

• 切換已經在jQuery的1.9進行了修改：http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed
• 你使用像#plus共同選擇...

看一看這個：

$('.show_hide').click(function(){ 
    var opener = this; 
    $(this).next(".slidingDiv").slideToggle(function(){ 
     if ($(this).is(":hidden")) { 
      $(opener).text("Se fler konstnärer +"); 
     } else { 
      $(opener).text("Se färre konstnärer -"); 
     } 
    }); 
}); 

而jsfiddle上的完整可運行版本：http://jsfiddle.net/42XQD/

隨意問問題的時候，目前還不清楚:)

乾杯托比亞斯

Answer 2

當調用

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

您可以隱藏所有的DIV匹配類slidingDiv。如果你想分開打開/隱藏你的div，你必須通過id或不同的類來識別它們。

您也可以嘗試從您找到格「a」元素

$('.show_hide').click(function() { 
    $(this).parent().next().toggle(); 
}); 

Answer 3

你需要給div的不同的ID的。現在你已經給了他們相同的類名和相同的ID。

然後你可以調用這些id的js函數而不是類名。