Question

我的页面上有一个使用jQuery的滑动div，我希望有多个实例。

目前他的jQuery脚本是......

$(document).ready(function(){

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

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

我的链接/ div是......

<a href="#" class="show_hide" style="display: inline; ">test<span style="float:right;">+</span></a>

<div class="slidingDiv" style="display: none; ">
<div class="information-alert">test</div>

我将如何创建多个实例？感谢

Answer 1

我会改变

$(".slidingDiv").slideToggle();

到

$(this).next().slideToggle();

表示“slideToggle在单击元素后面的元素”。

请参阅this JSFiddle

Answer 2

尝试让我的脚本工作，以便当联系人div关闭并且你点击任何地方但联系div时它将向上滑动。我知道我正在做这个错误我希望有一些提示，如果可能的话，谢谢。

Here is a link 我正在做的事情。

$(document).ready(function() {

    $("a.contact-btn").toggle(
               function () {
                $("#contact").animate( {"top": "0"}, 900, "linear" );
                },
               function () {
                $("#contact").animate( {"top": "-450px"}, 900, "linear" );
                    });




    $('body').bind('click', function(e) {

        var position = $('#contact').css('marginTop');

        if (position != '-450px') {
            $("#contact").animate( {"top": "-450px"}, 900, "linear" );
            e.preventDefault();
            }

            else if('#contact') {
                 $("#contact").animate( {"top": "0"}, 900, "linear" );
                    }
           });      
             });

Answer 3

查看JQuery的每个方法http://api.jquery.com/each/

我不确定您要创建多个实例：slidingDiv ?, show_hide链接？既？

无论如何，我确信你需要使用每种方法迭代你的多个实例。

jQuery Sliding Div

3 个答案: