javascript - Jquery幻灯片切换问题

Question

我正在尝试触发我的幻灯片切换，但没有按预期工作。每次点击仅适用于第一个 div。

HTML 代码：

<div id="toggle">
    <span id="down"></span>
    <a id ="slide" href="#">Passende Produkte zum Gutschein</br></a>
    <div id="inner">text tetxtext</div>

    <span id="down"></span>
    <a id ="slide" href="#">Passende Produkte zum Gutschein</a>
    <div id="inner">text tetxtext</div>
</div>

JS代码：

$('a').click(function() {
    $('#inner').slideToggle('fast');    
});

CSS：

#inner {
    display:none;
}

我的结果位于此处。

Answer 1

ID 必须是唯一的，您应该改用类，而且您还没有在 jsfiddle 中加载 jQuery。

<div id="toggle">
    <span class="down"></span>
    <a class="slide" href="#">Passende Produkte zum Gutschein</br></a>
    <div class="inner">text tetxtext</div>

    <span class="down"></span>
    <a class="slide" href="#">Passende Produkte zum Gutschein</a>
    <div class="inner">text tetxtext</div>
</div>

根据您的标记，您可以使用next或siblings方法。

$('a').click(function(event){
   $(this).next('.inner').slideToggle('fast');
   // $(this).siblings('.inner').slideToggle('fast'); 
   event.preventDefault() // prevents the default action of event.       
});

http://jsfiddle.net/Wh5u2/