Question

与此问题中提供的答案有关： How to slide down a div then .fadeIn() the content and vice versa?

我提供的js小提琴专门为其中一个div设置了jquery。如果我有多个div，我如何调整要点击div的jquery代码？我已经修改了代码，但它不起作用：

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
    <div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p></p>
<a href="#" onclick="toggleSlider();">toggle2</a>
<div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p>HELLO WORLD</p>

jquery，我想我正在使用jquery来识别＆＃34; contentthatfades部分错误：

function toggleSlider() {
    if ($("#"+ this.id).is(":visible")) {
        $("#content"+this.id+"Fades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#"+ this.id).slideUp();
            }
        );
    }
    else {
        $("#"+ this.id).slideDown(600, function(){
            $("#content"+this.id+"Fades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

Answer 1

像这样更改html： -

<a href="#" onclick="toggleSlider(this);">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
<div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
 </div>
  <p></p>
   <a href="#" onclick="toggleSlider(this);">toggle2</a>
    <div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
</div>

你好世界

然后jquery函数： -

   function toggleSlider(el) {
        var dv = $(el).next('div');
        if (dv.is(":visible")) {
           dv.animate(
                {
                    opacity: "0"
                },
                600,
                function () {
                    dv.slideUp();
                }
            );
        }
        else {
            dv.slideDown(600, function () {
                dv.animate(
                    {
                        opacity: "1"
                    },
                    600
                );
            });
        }
    }

Demo

尝试将一个切换应用于多个div

1 个答案: