相关下拉元素上的 if-else 语句的问题

Question

我正在创建一系列下拉元素，其中包含最初可见的问题和单击问题后在 display: block 和 display: none 之间切换的答案。单击每个问题的答案也会导致所有其他答案变为 display: none.

我遇到的问题是与单击 .question 后的 if-else 语句有关，隐藏所有与该问题无关的答案。如果下一个答案是 display: none，请将其更改为 display: block。

下一个 if-else 语句应该指示：如果下一个答案是 display: block，则将其改回 display: none。但是，虽然我没有收到任何控制台错误，但 if-else 语句根本没有运行目前的状态。

希望这又是我看代码有点厚的情况！

function script() {
  $('.question').on('click', function() {
    $('#faqs').find('.answer').not($(this)).hide();
    if ($(this).next(".answer").css("display", "none")) {
      $(this).next(".answer").css("display", "block");
    } else if ($(this).next(".answer").css("display", "block")) {
      $(this).next(".answer").css("display", "none");
    };
  });
}

$(document).ready(script);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="faqs">
  <div class="qna">
    <div class="question">
      <h8>
        Question 1
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 1
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 2
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 2
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 3
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 3
      </p>
    </div>
  </div>
</div>

Answer 1

你的逻辑有几个问题。首先，您的 if 语句条件使用 css() 的 setter，而不是 getter.因此它总是 return true 因为它将 jQuery 对象 return 强制为布尔值。

其次，您在执行逻辑之前隐藏了所有 .answer 元素，因此即使在更正后，if 条件也始终会看到 .answer 是 display: none 因为你刚刚把它藏起来了。

第三，您将 $(this) 提供给 not()，但 this 是对 .question 的引用，而不是 .answer。解决了这些问题后，这有效：

function script() {
  $('.question').on('click', function() {       
    var $answer = $(this).next('.answer');
    if ($answer.css("display") == "none") {
      $answer.css("display", "block");
    } else {
      $answer.css("display", "none");
    };
    
    $('#faqs').find('.answer').not($answer).hide();
  });
}

$(document).ready(script);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="faqs">
  <div class="qna">
    <div class="question">
      <h8>
        Question 1
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 1
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 2
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 2
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 3
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 3
      </p>
    </div>
  </div>
</div>

注意上面使用 $answer 变量通过减少访问 DOM.

的次数来提高性能

但是你应该注意到，这一切都可以变得更简单。您可以使用 toggle() 在连续点击时仅 hide/show 相关的 .answer。试试这个：

function script() {
  $('.question').on('click', function() {
    var $answer = $(this).next('.answer').toggle();
    $('#faqs').find('.answer').not($answer).hide();
  });
}

$(document).ready(script);

.answer {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="faqs">
  <div class="qna">
    <div class="question">
      <h8>
        Question 1
      </h8>
    </div>
    <div class="answer">
      <p>
        Answer 1
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 2
      </h8>
    </div>
    <div class="answer">
      <p>
        Answer 2
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 3
      </h8>
    </div>
    <div class="answer">
      <p>
        Answer 3
      </p>
    </div>
  </div>
</div>

Answer 2

看来你用的是Jquery，所以最好用$('.answer').show()或$('.answer').hide()。此外，display: none 将应用于所有类这就是为什么在单击每个问题时它会隐藏所有答案的原因。最好遍历循环并动态分配类 like - answer-1, answer-2

相关下拉元素上的 if-else 语句的问题

Problems with if-else statement on related dropdown elements

javascript

jquery

if-statement

this

display