JQuery Slide down/up - 同じクラス名から1つのdivだけを表示

Question

私はULリストを作成しました。各LIには2つのDIVがあります - 表示可能な質問タブと非表示の回答タブ。タブの右側にボタンがあります（質問タブには[スライドダウン]ボタンがあり、回答タブには[スライドアップ]ボタンがあります）。しかし、これらのボタンをクリックすると、ULリスト全体にすべてのDIVが表示されます。クリックしたコンテンツのみを表示し、残りのDIVを非表示にするにはどうすればよいですか？

HTMLは以下のようになります。

<ul> 
    <li> 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
    </div> 
    <div class="answerTab">Answer: It's blue. 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
    </div> 
    </li> 
</ul> 

をこの記事では、私は

.answerTab { 
    display: none; 
    } 

などパディング、マージン、色などの一般的なレイアウトを除外とjQueryのスクリプトは、現在開いているであろう次のようになります。 ULのすべてのタブ：

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(".answerTab").slideUp("slow"); 
     }); 
    }); 

しかし、いくつかの調査に基づいていくつかの人々は私と同様の問題で、クリックしたDIVだけを表示するように調整しました。最終的にはこのように見えますが、動作しません。

$(document).ready(function(){ 
     $(".slideDownButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideDown("slow"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".slideUpButton").click(function(){ 
      $(this).parent("li").find(".answerTab").slideUp("slow"); 
     }); 
    }); 

私はあなたの助けとアドバイスをお願いします。次のコードを改善するにはどうしたらよいですか？すべての助けに感謝します。

Answer 1

エラーが2つあることを除いて、最初のJQueryコードが機能します。

1. スクリプトの冒頭で$(document).readyに一度だけ電話する必要があります。 $(document).ready関数を使ってJQueryコードをラップする必要があります。
2. あなたは次のように書いています。$(",answerTab").slideUp("slow"); - クラス名answerTabにはカンマではなくピリオドを付ける必要があります。だからそれはこう書かれているはずです：$(".answerTab").slideUp("slow");

以下はあなたのコードの動作バージョンです。また、これをチェックアウトすることができますCodePen Demo。私はこれが役立つことを願っています質問と回答で複数のリスト項目については

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab" id="firstTab">What is the natural color for Dory? 
 
     <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton" style="background-color: red">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

、あなたはそうのようなjQueryの方法parentとnextでDOMをトラバースすることができます

$(document).ready(function() { 
 
    $(".slideDownButton").click(function() { 
 
    $(this).parent(".questionTab").next(".answerTab").slideDown("slow"); 
 
    }); 
 
    $(".slideUpButton").click(function() { 
 
    $(this).parent(".answerTab").slideUp("slow"); 
 
    }); 
 
});

.answerTab { 
 
    display: none; 
 
} 
 

 
li { 
 
    padding-top: 1rem; 
 
} 
 

 
span { 
 
    background-color: red; 
 
} 
 

 
span:hover { 
 
    cursor: pointer; 
 
    background-color: #E00; 
 
}

<ul> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Dory? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's blue. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Woof? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's brown. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="questionTab">What is the natural color for Wolf? 
 
     <span class="slideDownButton">SLIDEDOWN</span> 
 
    </div> 
 
    <div class="answerTab">Answer: It's grey. 
 
     <span class="slideUpButton">SLIDEUP</span> 
 
    </div> 
 
    </li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>