如何使同一頁面上的多個div的jQuery slidetoggle效果？

Question

它工作正常，一個div

(function($) { 
     $(document).ready(function(){
        $('#div1').hide();
        $('a.plus').click(function(){
           $('#div1').slideToggle();
           $(this).toggleClass("minus_icon"); 
           return false;
        });
     });
})(jQuery);

如何在同一頁面上的多個div上使此幻燈片效果變得如此？ 我有多個具有不同ID的div來隱藏，例如#div1 ， #div2 ， div#3 。

編輯：

這是HTML中的情況

<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>

Answer 1

（function（$）{$（document）.ready（function（）{$（'＃div1，＃div2，＃div3'）。hide（）; $（'a.plus'）。click（function（）{ $（this）.next（）。slideToggle（）; $（this）.toggleClass（“ minus_icon”）; return false;}）;}）;}）（jQuery）;

Answer 2

假設您的HTML是這樣的：

<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>

然后擁有這樣的功能將對您擁有的a.plus / div對有效：

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       $(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

如果由於某種原因您的a.more div本身附近，則必須在a.more上設置屬性以將其鏈接到div，例如。 （HTML）

<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>

... some more HTML

<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>

和Javascript：

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       var id = 'div' + $(this).attr('data-article');
       $('div#' + id).slideToggle();
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

Answer 3

為您的div提供相同的類（例如'div_to_toggle'），然后代替$（'＃div1'），$（'＃div2'），...您可以使用一個選擇器：$（'。div_to_toggle'）全部選擇它們：

$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();