我可以使用内联CSS来制作可扩展的内容吗？

Question

我正在asp.net店面的着陆页上工作，并且想要添加可展开的内容。我被告知我应该为此使用内联样式 - 而不是内部样式表，并且因为在CSS中有伪造样式，所以我无法在内联样式中扩展内容。

有没有关于如何使用内联样式创建可展开内容的选项？

/* Accordian Items */ 
 
.collapse { 
 
\t text-align:left; 
 
} 
 

 
.collapse > * + *{ 
 
    display:none; 
 
    
 
} 
 
.collapse > *{ 
 
    cursor:pointer; 
 
    } 
 
    
 
.collapse:focus{ 
 
    outline:none; 
 
} 
 
.collapse:focus > * + *{ 
 
    display:block; 
 
} 
 

 
.accordian-cta { 
 
\t width:20%; 
 
\t float: right; 
 
\t vertical-align:middle; 
 
\t text-align:right; 
 
} 
 

 
.accordian-title { 
 
\t width:100%; 
 
\t max-width:1000px; 
 
\t 
 
\t text-indent:10px; 
 
\t margin-bottom:10px; 
 
\t color:rgb(71,70,70); 
 
\t font-size:1.17em; 
 
\t font-family:arial, verdana, sans-serif; 
 
\t font-weight:bold; 
 
\t padding:5px;

<div class="collapse" tabindex="3"> 
 
    <div class="accordian-title">Click to expand<div class="accordian-cta">+&nbsp;</div> </div> 
 
    <div class="accordian-text"> 
 
    [EXPANDED CONTENT HERE] 
 

 
     
 
    </div> 
 
    </div>

Answer 1

你不能用内联CSS，但恕我直言没有一点约束你的代码这种方式。以下是在纯的CSS的其他例子，使用类型复选框的输入：

#expand { 
 
    display: none; 
 
} 
 
#toggle:checked ~ #expand { 
 
    display: block; 
 
}

<input id="toggle" type="checkbox" checked> 
 
<label for="toggle">Hide/Show</label> 
 
<p id="expand"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
</p>

它通过失去焦点，这是更“稳定”时不切换所述内容不同于代码为用户。

您可以添加更多css以在高度上进行过渡而不是粗暴的“显示/不显示”，或以更时尚的方式复选复选框，如here。

有关css选择器的详细信息here。