0

私は、仕事の説明の短いプレビューとトグルを表示するキャリアページに取り組んでいます。トグルをクリックすると、下にスライドして投稿の詳細が表示されます。

マークアップは次のようになります。

<div>
    <div class="career-excerpt">
        <p>Preview text goes here</p>
    </div>
    <div class="career-details">
        <p>Longer explanation / detail text goes here</p>
    </div>
    <p><a class="toggle" href="#">Show Details</a></p>
</div>

詳細セクションを開くために使用しているjQueryは次のとおりです。

$(".career-details").hide();
$(".toggle").click(function () {
    $(".career-details").toggle("fast",function() {
        $('.toggle').text(
          $(this).is(':visible') ? "Hide Details" : "Show Details"
        );
    });
});

これは、詳細を開くように切り替え、テキストを「詳細を表示」から「詳細を非表示」に変更するために機能します。ただし、複数の投稿が各ページに表示されるため、このコードを使用すると、トグルを 1 回クリックするとすべての説明が開きます。

クリックしたトグルの同じ親 div 内の「キャリア詳細」 div のみを開くように切り替えたいと思います。

私は変更しようとしました：

$(".career-details").toggle("fast",function() {

に：

$(this).closest(".career-details").toggle("fast",function() {

しかしその後、トグルはまったく機能していないようです。どんなアイデアでも大歓迎です、ありがとう！

4

4 に答える 4

6

.toggleの子ではない.career-detailsので、あなたがしたことはうまくいきません、これを試してください：

$(this).closest("div").find(".career-details").toggle("fast",function() {....});
于 2012-08-13T17:09:27.567 に答える
2

$(this).parent().find('.career-details').toggle('fast', function(){

于 2012-08-13T17:10:02.610 に答える
1

あなたはほとんどそこにいます、唯一の問題はあなたが.career-details要素を見つけようとしている方法です。

それはそのようになります：

$(this).parent().siblings(".career-details").toggle("fast",function() {
于 2012-08-13T17:10:08.367 に答える
1 
$(".toggle").click(function() {
    var that = $(this); //that == clicked Element
    that.parent().prev().toggle("fast", function() {
        that.text($(this).is(':visible') ? "Hide Details" : "Show Details");
    });
});

フィドル

.toggleの親pとトグルしている の間にさらに多くの要素がdivある場合は、より頑丈なセレクターを使用できます (パフォーマンスは多少低下しますが、同じように機能します)。

var that = $(this);
that.parent().prevAll('.career-details').first().toggle("fast", function() {

フィドル

于 2012-08-13T17:13:50.140 に答える