2

スライドトグルを起動しようとしていますが、期待どおりに機能していません。各クリックは最初の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;
}

私の結果はここにあります。

4

1 に答える 1

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/

于 2012-09-28T11:52:50.787 に答える