Question

当我点击第一个切换时，它可以正常工作。但第二个没有打开。如果我改变面板＆＃39;从id到class同时切换。如果我点击第1个，只有第一个切换，而第二个点击第2个切换，我想做。

HTML

<div id="flip"><a href='#'>Android Hacker's Book</a></div>
<div id="panel">
    <img src="images/Android Hack $38.32.jpg"></img>
    Price: $38.32.61
</div>
<div id="flip"><a href='#'>Advanced C & C++ Compiling</a></div>
<div id="panel">
    <img src="images/Advanced c $57.61.jpg"></img>
    Price: $57.61
</div>

脚本脚本代码

$(document).ready(function(){
    $("#flip").click(function()
    {
        $(this).next('#panel').slideToggle("slow");
    });
});

CSS

#panel
{
    display:none;
}

Answer 1

由于id必须是唯一的，因此您需要使用class：

<div class="flip">
    <a href='#'>Android Hacker's Book</a>
</div>
<div class="panel">
    <img src="images/Android Hack $38.32.jpg" />
    Price: $38.32.61
</div>
<div class="flip">
    <a href='#'>Advanced C & C++ Compiling</a>
</div>
<div class="panel">
    <img src="images/Advanced c $57.61.jpg" />
    Price: $57.61
</div>

然后您可以使用.按类名来定位元素：

$(document).ready(function () {
    $(".flip").click(function () {
        $(this).next('.panel').slideToggle("slow");
    });
});

请注意，<img />是自动结算标记，您需要使用<img />代替<img></img>

<强> Fiddle Demo

多个jquery幻灯片切换不起作用

1 个答案: