JQuery向下/向上滑動 - 僅顯示同一個類名中的一個div

Question

我已經創建了UL列表，每個LI有兩個DIV - 一個可見問題標籤和一個隱藏答案標籤。在標籤的右側有一個按鈕（問題標籤有SlideDown按鈕，回答標籤有SlideUp按鈕）。但是一旦我點擊這些按鈕，就會顯示整個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"); 
     }); 
    }); 

但是，基於一些研究，一些人有s同樣的問題，因爲我試圖做出以下調整，只顯示點擊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

您的第一個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>