如何更改子节点css？

Question

我正试图在我的常见问题中启用查看/隐藏功能，但是现在尝试用children访问我的孩子answers_body时，我得到了一个错误。children is not a function，如何正确访问answers_body才能将display:none更改为display:block

<section class="faqs">
  <div class="accordion row">
      <div class="__block col-lg-7 mx-auto py-3">
          <div class="row justify-content-between align-items-start">
              <div class="col-11">
                  <h3 class="__question">
                      demo
                  </h3>
              </div>
              <div class="col-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" /></svg>
              </div>
          </div>
          <div class="answers_body"> I want to access to this node in order to display it 
              <div class="col">
                  <p class="answer">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
                  </p>
              </div>
          </div>
      </div>
</section>

$('.__question').click(function(){
  var $parent = $(this);
  console.log($patern[0].InnerText)
});

Answer 1

如果您正在尝试为您的faq做切换效果，那么您可以尝试以下方法。

$('.__question').click(function() {
  var parent = $(this).parents('.accordion.row');
  if (parent.find('.answers_body').hasClass('answers-active')) {
    parent.find('.answers_body').removeClass('answers-active');
  } else {
    parent.find('.answers_body').addClass('answers-active');
  }
});

在这里，您需要找到您正在单击的元素和需要显示的元素所共有的父元素。然后使用.find()方法可以定位元素并显示。请参阅fiddle

更新

既然你说这是不工作的，我认为用于所有faq的父类是错误的。如果你能更新代码，我可以帮你。否则，您可以使用以下代码。

$('.__question').click(function() {
  var parent = $(this).closest('.row').siblings('.answers_body');
  if (parent.hasClass('answers-active')) {
    parent.removeClass('answers-active');
  } else {
    parent.addClass('answers-active');
  }
});