切換樣式：顯示僅適用於樣式爲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" 
    } 
} 

希望這是你在找什麼！