0

我有两个 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 +")
       }
       );
   });
});
4

3 回答 3

0

打电话时

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

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

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

$('.show_hide').click(function() {
    $(this).parent().next().toggle();
});
于 2013-10-31T14:31:30.373 回答
0

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

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

于 2013-10-31T14:34:02.843 回答
0

我认为有几个原因

看看这个：

$('.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/

不清楚时随时提出问题:)

干杯托拜厄斯

于 2013-10-31T14:45:12.150 回答