打开和关闭容器（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>