切换样式：显示仅适用于样式为HTML时不在CSS中

Question

将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后停止工作，打开和关闭显示器。这是什么？

Answer 1

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>

Answer 2

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

Answer 3

试试这样说：

<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" 
    } 
} 

希望这是你在找什么！