切换样式:只有当样式在HTML中而不是在CSS中时，显示才有效

Toggle style:display only works when style is in HTML not in CSS

本文关键字：样式 CSS 中时 显示 有效 HTML      更新时间：2023-10-11

在将CSS样式适当地移动到CSS页面时遇到问题。我的原始页面运行良好：

<span class="faq-answer" data-category="<%=category %>" data-index="<%= i %>" style="display:none;"><%= a %></span>
function toggleVisible(category, index) {
  var select_answer = '.faq-answer[data-category="' + category + '"][data-index="' + index + '"]';
  var current_display = $(select_answer)[0].style.display;
  if (current_display === "none") {
    $(select_answer)[0].style.display = "block"
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="10px"
  } else if (current_display === "block") {
    $(select_answer)[0].style.display = "none"
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="0px"
  };
}

然而，一旦我将style="display:none"放入一个CSS文件中，如下所示：

.faq-answer {
  display:none;
}

然后JS停止工作以打开和关闭显示。这是什么？

element.style包含内联样式的样式，而不是CSS样式表中的样式。您需要使用jQuery（"element"）.css或getComputedStyle来获取值

JQuery css方法

var dispVal = jQuery(".faq-answer").css("display");
console.log(dispVal);
.faq-answer {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-answer"><div>

getComputedStyle

var ele = document.querySelector(".faq-answer");
var style = window.getComputedStyle(ele);
console.log(style.display);
.faq-answer {
  display:none;
}
<div class="faq-answer"></div>

您也可以更简单地使用.is（"：visible"），它将返回一个布尔值，如果可见则为true，如果不可见则为false。

var isVisible = $(".faq-answer").is(":visible"); ;
console.log(isVisible);
.faq-answer {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-answer"><div>

您的脚本正在查看元素的style属性。如果要使用类而不是样式，请创建两个不同的类并切换。

这样试试：

<span class="faq-answer" data-category="<%=category %>" data-index="<%= i %>" class="faq_answer"><%= a %></span>
function toggleVisible(category, index) {
  var select_answer = '.faq-answer[data-category="' + category + '"][data-index="' + index + '"]';
  var isDisplayed = !$(select_answer)[0].hasClass("faq-answer");
  if (!isDisplayed) {
    $(select_answer)[0].removeClass('faq-answer');
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="10px"
  } else {
    $(select_answer)[0].addClass('faq-answer');
    $('.faq-question[data-category="' + category + '"][data-index="' + index + '"]')[0].style.paddingBottom="0px"
  }
}

希望这就是你想要的！

相关文章：