打開和關閉容器（div）

Question

我讓我的jQuery早些時候工作，但最近我不得不向我的HTML添加更多的div。我試圖打開並關閉discussionContainer並點擊按鈕replyButton。任何幫助都會很棒。

我將在這裏儘快點擊replyButton，因爲我將通過並通過id請求從我的數據庫獲取內容，我可以在Angularjs中執行此操作嗎？也許一些其他想法/建議比jQuery和Angularjs？在頁面加載時，discussionContainer將被關閉。

$(document).on("click", ".replyButton", function() { 
 
    $(this).parent('.forQuestions').find(".discussionContainer").slideToggle(300); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="question"> 
 
    <div class="forQuestion"> 
 
    <div class="cardBody"> 
 
     {{answer.aContent}} 
 
    </div> 
 
    <div class="cardFooter"> 
 
     <div class="col-xs-4 footer1"> 
 
     <button class="replyButton">Reply</button> 
 
     </div> 
 
     <div class="col-xs-4 footer2"> 
 
     <i class="fa fa-trash" aria-hidden="true" ng-click="controller.deleteAnswer(answer._id)"></i> 
 
     <i class="fa fa-pencil" aria-hidden="true" ng-click="controller.showEditAnswerModal(answer)"></i> 
 
     </div> 
 
     <div class="col-xs-4 footer3"> 
 
     {{answer.aDate | date: 'medium'}} 
 
     </div> 
 
    </div> 
 
    <div class="discussionContainer"> 
 
     <ul> 
 
     <li>comment1</li> 
 
     <li>comment2</li> 
 
     </ul> 
 
     <div class="newComment"> 
 
     <textarea rows="2" cols="30" placeholder="New comment"></textarea> 
 
     <button type="button" name="button">Comment</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</li>

Answer 1

與您的代碼的問題是：

1--.parent()僅行進的單級了DOM樹

2--你有沒有元素forQuestions您的正確班級是forQuestion沒有s上月底..所以你需要使用.closest('.forQuestion')

演示

$(document).on("click", ".replyButton", function() { 
 
    $(this).closest('.forQuestion').find(".discussionContainer").slideToggle(300); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="question"> 
 
    <div class="forQuestion"> 
 
    <div class="cardBody"> 
 
     {{answer.aContent}} 
 
    </div> 
 
    <div class="cardFooter"> 
 
     <div class="col-xs-4 footer1"> 
 
     <button class="replyButton">Reply</button> 
 
     </div> 
 
     <div class="col-xs-4 footer2"> 
 
     <i class="fa fa-trash" aria-hidden="true" ng-click="controller.deleteAnswer(answer._id)"></i> 
 
     <i class="fa fa-pencil" aria-hidden="true" ng-click="controller.showEditAnswerModal(answer)"></i> 
 
     </div> 
 
     <div class="col-xs-4 footer3"> 
 
     {{answer.aDate | date: 'medium'}} 
 
     </div> 
 
    </div> 
 
    <div class="discussionContainer"> 
 
     <ul> 
 
     <li>comment1</li> 
 
     <li>comment2</li> 
 
     </ul> 
 
     <div class="newComment"> 
 
     <textarea rows="2" cols="30" placeholder="New comment"></textarea> 
 
     <button type="button" name="button">Comment</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</li>