添加架构标记后，手风琴式可折叠面板未扩展

问题描述 投票：0回答：1

我的手风琴可折叠面板工作正常。如您所见，第一个面板无法正常工作，而第二个面板则无法正常工作。这两者之间的区别并不大。我在第一个面板中添加了架构标记，但之后，它不会通过单击展开。我希望面板能够与架构标记一起扩展，并且需要这方面的帮助。

  

<style>    
.servive-info {
    padding: 10px 20px;
    background: #ebf6f5;
    border: 1px solid #dae9f3;
    border-radius: 7px;
    margin-top: 25px;
    overflow: auto;
    color: #333333d9 !important;
}
.servive-info p {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 1.5em;
    color: #333;
    font-weight: 400;
}

.faqtitle {
    font-weight: 700;
    font-size: 24px;
    color: black;
    padding: 15px 15px 0;
    font-family: Sans-Serif;
    border: none;
}

.accordion>input[type="checkbox"] {
    position: absolute;
    left: -100vw;
}

.accordion .content {
    overflow-y: hidden;
    height: 0;
}

.accordion>input[type="checkbox"]:checked~.content {
    height: auto;
    overflow: visible;
}

.accordion label {
    display: block;
}

.accordion {
    border-bottom: 2px solid #fff;
    padding: 15px 0px 8px 0px;
    overflow: hidden;
font-size: 15px;
letter-spacing: 0.5px;
line-height: 1.7;
}

.accordion>input[type="checkbox"]:checked~.content {
    padding: 10px 15px 0px 15px;
    border: 0px solid #e8e8e8;
    border-top: 0;
    border-top: 2px solid #004287;
    margin-top: 10px;
}

.accordion .handle {
    margin: 0;
    font-size: 18px;
    line-height: 1.5em;
    border-left: 2px solid #c82333;
    margin-right: 10px;
}

.accordion label {
    color: #000;
    cursor: pointer;
    padding: 10px 15px;
}

.accordion label:hover,
.accordion label:focus {
    background: none;
}

.accordion .handle label:before {
content: '';
width: 8px;
height: 8px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #FBBC05;
display: inline;
margin-left: 10px;
vertical-align: middle;
text-align: center;
float: right;
transform: rotate(45deg);
margin-top: 6px;

}

.accordion>input[type="checkbox"]:checked~.handle label:before {
    content: "";
    transform: rotate(135deg);
}

.accordion:last-child {
    margin-bottom: 1em;
}

</style>  
 <div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
                
                <div class="accordion" >                  
                    <input type="checkbox" name="collapse" id="handle1" checked="checked">
                    
                    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                    <h2 class="handle" itemprop="name">
                          <label for="handle1">1. What is your name?</label>  
                    </h2>
                    
                    <div class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                     <p itemprop="text">My name is Adam.</p>
                    </div>
                     </div>
                </div>
                    
                <div class="accordion">
                    <input type="checkbox" name="collapse2" id="handle2">
                    <h2 class="handle">
                        <label for="handle2">2. What's your hobby?</label>
                    </h2>
                    <div class="content">
                        <p>Playing outdoor sports.</p>.
                    </div>
                </div>
            </div>

html css accordion
1个回答
0
投票

添加该模式映射破坏了手风琴，因为它将 

div.content
置于与 CSS 选择器应该定位的范围不同的范围中。

具体来说，以下两个 CSS 选择器/定义。

.accordion>input[type="checkbox"]:checked~.content {
    height: auto;
    overflow: visible;
}

.accordion>input[type="checkbox"]:checked~.content {
    padding: 10px 15px 0px 15px;
    border: 0px solid #e8e8e8;
    border-top: 0;
    border-top: 2px solid #004287;
    margin-top: 10px;
}

它正在寻找一个 

div.content
，它是输入复选框的同级，它位于第二个手风琴中......但在第一个手风琴中它不是，因为它位于不同 div 元素的范围内。将这两个 CSS 选择器更改为以下内容

.accordion>input[type="checkbox"]:checked~div>.content {
    height: auto;
    overflow: visible;
}

.accordion>input[type="checkbox"]:checked~div>.content {
    padding: 10px 15px 0px 15px;
    border: 0px solid #e8e8e8;
    border-top: 0;
    border-top: 2px solid #004287;
    margin-top: 10px;
}

解决您的问题。请注意在 

div>
前面添加了 
.content
。更新选择器以获取更新后的 HTML 结构中的 
div.content
。

.servive-info {
    padding: 10px 20px;
    background: #ebf6f5;
    border: 1px solid #dae9f3;
    border-radius: 7px;
    margin-top: 25px;
    overflow: auto;
    color: #333333d9 !important;
}
.servive-info p {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 1.5em;
    color: #333;
    font-weight: 400;
}

.faqtitle {
    font-weight: 700;
    font-size: 24px;
    color: black;
    padding: 15px 15px 0;
    font-family: Sans-Serif;
    border: none;
}

.accordion>input[type="checkbox"] {
    position: absolute;
    left: -100vw;
}

.accordion .content {
    overflow-y: hidden;
    height: 0;
}

.accordion>input[type="checkbox"]:checked~div>.content {
    height: auto;
    overflow: visible;
}

.accordion label {
    display: block;
}

.accordion {
    border-bottom: 2px solid #fff;
    padding: 15px 0px 8px 0px;
    overflow: hidden;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 1.7;
}

.accordion>input[type="checkbox"]:checked~div>.content {
    padding: 10px 15px 0px 15px;
    border: 0px solid #e8e8e8;
    border-top: 0;
    border-top: 2px solid #004287;
    margin-top: 10px;
}

.accordion .handle {
    margin: 0;
    font-size: 18px;
    line-height: 1.5em;
    border-left: 2px solid #c82333;
    margin-right: 10px;
}

.accordion label {
    color: #000;
    cursor: pointer;
    padding: 10px 15px;
}

.accordion label:hover,
.accordion label:focus {
    background: none;
}

.accordion .handle label:before {
    content: '';
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: #FBBC05;
    display: inline;
    margin-left: 10px;
    vertical-align: middle;
    text-align: center;
    float: right;
    transform: rotate(45deg);
    margin-top: 6px;
}

.accordion>input[type="checkbox"]:checked~div>.handle label:before {
    content: "";
    transform: rotate(135deg);
}

.accordion:last-child {
    margin-bottom: 1em;
}

<div class="servive-info" itemscope="" itemtype="https://schema.org/FAQPage">
    <div class="accordion" >
        <input type="checkbox" name="collapse" id="handle1" checked="checked">
        
        <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
            <h2 class="handle" itemprop="name">
                  <label for="handle1">1. What is your name?</label>
            </h2>
            
            <div class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                <p itemprop="text">My name is Adam.</p>
            </div>
        </div>
    </div>
        
    <div class="accordion" >                  
        <input type="checkbox" name="collapse2" id="handle2">
        
        <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
            <h2 class="handle" itemprop="name">
                  <label for="handle2">2. What's your hobby?</label>  
            </h2>
            
            <div class="content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                <p itemprop="text">Playing outdoor sports.</p>
            </div>
        </div>
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.