Question

它适用于一个div

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

如何在同一页面上为多个div制作此幻灯片？我有多个div具有不同的ID，可以隐藏#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（$）{ $（文件）。就绪（函数（）{ $（'＃div1，＃div2，＃div3'）。hide（）; $（ 'a.plus'）。点击（函数（）{ $（本）。接下来（）的slideToggle（）; $（本）.toggleClass（ “minus_icon”）; 返回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 s本身，则必须在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();

如何在同一页面上为多个div制作jQuery slidetoggle效果？

3 个答案: