0

jQueryを使用してコンテンツを非表示/表示していますが、機能しますが、希望どおりに機能しません。私の要素の階層は次のとおりです。

<div class="row">
    <div class="column">
        <a href="">Show/Hide</a>
    </div>
    <div class="column hide-id">blahblahblah</div>
</div>

コードは次のとおりです。

$(document).ready(function(){   
    $('.hide-id').hide();
    $('.column > a').click(function() {
        $('.hide-id').slideToggle(500);
            return false;
        });
    });
});

問題は次のとおりです。

$('.hide-id').slideToggle(500);

正常に動作しますが、この「hide-id」クラスを数回繰り返しています。つまり、「。column a」をクリックするたびに、クリックしている個々のdivではなく、「hide-id」を持つすべてのdivが表示されます。 。

私はそれのバリエーションを次のように試しました：

$(this).parent().next().slideToggle(500);
this = .column a + .parent() = .column + .next() = .column that contains .hide-id

しかし、動作するはずの何かに変更.slideToggleすると、スクリプトはまったく応答しないため、セレクターが無効であるかのように応答します。.hide-id

仕事をする方法はあり$('.hide-id').slideToggle(500);ますか、それとも別の方法を見つける必要がありますか？すでに.eachを適用しようとしましたが、正しく実行されなかったか、機能しませんでした。

4

1 に答える 1

0

あなたのコードであなたがしていることはwhen you click the show/hide link you are toggling all the .hide-id class objectあなたがこのようにできるようにすることです：http：//jsbin.com/obemoc/1/edit

$(document).ready(function(){   
   $('.hide-id').hide();
      $('.column > a').click(function() {
        $(this).parents('div.row').children('.hide-id').slideToggle(500);
        return false;
    });
});

ここでは、リンクの親をクリックして目的の子を見つけ、スライド機能を切り替えています。

于 2012-11-22T06:16:48.930 に答える