0

表示と非表示を切り替えたい div: が 2 つあります。今日、それぞれのリンクをクリックしたものを表示および非表示にできます。

今日の欠点は、すべての 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

div の異なる ID を指定する必要があります。今、あなたはそれらに同じクラス名と同じ ID を与えました。

次に、クラス名ではなく、これらの ID で js 関数を呼び出すことができます。

于 2013-10-31T14:34:02.843 に答える
0

通話時

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

クラス slideDiv に一致するすべての div を非表示にします。div を別々に開いたり隠したりしたい場合は、id または異なるクラスで識別する必要があります。

「a」要素からdivを見つけることもできます

$('.show_hide').click(function() {
    $(this).parent().next().toggle();
});
于 2013-10-31T14:31:30.373 に答える
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 に答える