Question

我有两个div：我希望能够显示和隐藏。今天我可以显示和隐藏我们点击各自链接的那些。

今天的缺点是所有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

致电

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

隐藏与slideDiv类匹配的所有div。如果你想分开打开/隐藏你的div，你必须通过id或不同的类来识别它们。

您也可以尝试从“a”元素中找到div

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

Answer 2

你需要给出div不同的id。现在你已经给了他们相同的类名和相同的id。

然后你可以在那些id上调用js函数而不是类名。

Answer 3

我认为有几个原因

toggle已在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上的完整runnable版本：http://jsfiddle.net/42XQD/

如果不清楚，请随时提问：）

Cheers Tobias

显示/隐藏多个div：s

3 个答案: