jquery - 打开和关闭容器 (div)

Question

我的 jQuery 之前可以正常工作，但最近我不得不向我的 HTML 添加更多的 div。我正在尝试通过单击按钮 replyButton 打开和关闭 discussionContainer。任何帮助都会很棒。

我将在此处对 replyButton 进行 ng-click 操作，并获取 http 请求的 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>