显示/隐藏多个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函数而不是类名。