Question

标题说明了一切。我正在尝试使用CSS将手风琴添加到“谢谢”登录页面中。除一件事外，我已完成所有设置：LP的桌面版本不会随手风琴自动调整大小。为什么打开手风琴会出现在其他网站元素之上的任何想法？

着陆页：http://pages.na.industrial.panasonic.com/Subscribe_Landing-Page-Subscribe-Thank-You---Erics-Optimizations.html

以下是我用于CSS的样式：

<style>  
.accordion {  
background-color: #edefef;  
    color: #464646;  
    cursor: pointer;  
    padding: 18px;  
    width: 100%;  
    border: none;  
    text-align: left;  
    outline: none;  
    font-size: 1.5em;  
font-weight: 500;  
    transition: 0.4s;   
}  


.active, .accordion:hover {  
background-color: #d7d9d9;  
}  

.panel {  
    padding: 0 18px;  
    display: none;  
    background-color: white;  
    overflow: hidden;  
    }

以及手风琴的代码：

<button class="accordion">2016</button>  
<div class="panel">  
  <div class="archiveContainer"  style="padding-top: 0px; ">  
   <h2 class="archeader">DECEMBER 2016</h2>  
   <a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161214.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b> X-GaNTM Power Transistors&#9658;</b></a>  
  </div>             
  <div class="archiveContainer"  style="padding-top: 0px; ">  
    <h2 class="archeader">NOVEMBER 2016</h2>  
    <a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161115.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b> Rechargeable Pin Type Lithium Ion Battery & “Saturn Lens” PIR Motion Sensor &#9658;</b></a>  
  </div>  
  <div class="archiveContainer"  style="padding-top: 0px; ">  
    <h2 class="archeader">OCTOBER 2016</h2>  
    <a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161018.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>NASBIS Insulating Sheets &#9658;</b></a>  
  </div>  
  <div class="archiveContainer" style="padding-top: 0px; ">  
    <h2 class="archeader">SEPTEMBER 2016</h2>  
    <a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20160914.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>Bluetooth Low Energy & NFC Combination RF Module &#9658;</b></a>  
  </div>  
  <div class="archiveContainer"  style="padding-top: 0px; " >  
    <h2 class="archeader">AUGUST 2016</h2>  
    <a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20160816.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>Bluetooth Low Energy Beacon &#9658;</b></a>  
  </div>  
</div>

HTML / CSS手风琴无法在Marketo登陆页面的桌面版本上自动展开

0 个答案: