将 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获取值(value)
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")这将返回一个 bool 值,如果可见则返回 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>
关于javascript - 切换样式 :display only works when style is in HTML not in CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28465755/