手風琴創建手風琴

-4

我有一些要求，因爲我手風琴和麪板有問題。我希望我的手風琴包含其他手風琴。但是我的主頁大小有些麻煩，因爲div沒有對齊。否則，在我的工作中，我們不能使用js，所以我只想在html和css中使用代碼。手風琴創建手風琴

我後我的代碼： HTML：

<button class = "accordion">Fat Section</button> 

<div class = "panel"> 
<button class = "accordion"</button> 
<div class='panel'> 
<p>Statut:</p> 
</div> 
</div> 

    button.accordion { 
    background-color:#ADD8E6; 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    width: 50%; 
    text-align: left; 
    border: none; 
    outline: none; 
    transition: 0.4s; 
    display: block;} 

    button.accordion.active, button.accordion:hover { 
    background-color: #B0E0E6; 

    div.panel { 
    padding: 0 18 px; 
    width: 100%; 
    height: 100%; 
    background-color:white; 
    transition: max-height 0.2s ease-out; 
    transform: translateY(-50%); 
    display:none;} 


    div.accordion 
    { 
    position: relative; 
    display: block; 
    } 
    button.accordion:after { 
    content: '\02795'; /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #777; 
    margin-left: 85%;} 

    button.accordion.active:after { 
    content: "\2796"; /* Unicode character for "minus" sign (-) */

感謝您的幫助！

來源

2017-06-20 Caim

爲什麼PHP標籤的建議？手風琴也沒有足夠的代碼。這聽起來像是「你能幫我完成嗎？」題。 –

-1

$(document).ready(function() { 
 
    $("ul.trackAccordion").accordion({ 
 
    \t collapsible: true, 
 
    \t active: false, 
 
    \t heightStyle: "content" 
 
    }); 
 
});

input:focus { outline: none; } 
 

 
body,html{ 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: url('http://subtlepatterns.com/patterns/crossword.png'); 
 
\t background-repeat: repeat; 
 
} 
 

 
a { 
 
\t color: white; 
 
\t outline: none !important; 
 
} 
 

 
a:-webkit-any-link{ 
 
\t text-decoration: none !important; 
 
} 
 

 
ul{ 
 
    \t list-style-type: none; 
 
    \t -webkit-padding-start: 0 !important; 
 
} 
 

 
.trackAccordion{ 
 
\t margin: 50px auto; 
 
\t background-color: #2d2d2d; 
 
\t height: 790px; 
 
\t width: 296px; 
 
\t border-radius: 5px; 
 
\t color: white; 
 
\t font-family: 'Helvetica'; 
 
\t font-weight: bold; 
 
\t padding-top: 30px; 
 
\t font-size: 1em; 
 
\t text-align: center; 
 
\t overflow: hidden; 
 
} 
 

 
ul.trackAccordion > li{ 
 
\t color: white; 
 
\t padding-bottom: 20px; 
 
\t padding-top: 20px; 
 
\t border-bottom: thick solid #464646; 
 
} 
 

 
ul.tracks > li{ 
 
\t padding: 20px; 
 
\t background-color: #444444; 
 
\t margin-bottom: 2px; 
 
\t margin-left: -10px; 
 
\t text-align: left; 
 
\t font-weight: normal; 
 
\t font-size: 14px; 
 

 
} 
 

 
ul#cert_Track > li{ 
 
\t border-left:thick solid #01cfe7; 
 
\t border-left-width:20px; 
 
} 
 

 
ul#kids_Track > li{ 
 
\t border-left:thick solid #aa2e54; 
 
\t border-left-width:20px; 
 
} 
 

 
ul#more_Track > li{ 
 
\t border-left:thick solid #618daa; 
 
\t border-left-width:20px; 
 
} 
 

 

 
.proTrack{ 
 
\t padding-top: 0 !important; 
 
} 
 

 
.accoTrack{ 
 
\t margin-bottom: 30px; 
 
} 
 
.blueBorder{ 
 
\t background: #00d0e7; 
 
\t position: relative; 
 
\t left: -58px; 
 
\t padding: 20px 13px 19px 7px; 
 
} 
 

 
.nestedElemAccor{ 
 
\t margin-top: -20px; 
 
} 
 
.nestedElems{ 
 
\t border-bottom: none; 
 
} 
 

 
.begNestElem{ 
 
\t background-color: #0bddf0; 
 
\t padding: 13px 105px 13px 105px 
 
} 
 

 
.intNestElem{ 
 
\t background-color: #08a2b0; 
 
\t padding: 13px 105px 13px 105px 
 
} 
 

 
.advNestElem{ 
 
\t background-color: #067983; 
 
\t padding: 13px 105px 13px 105px 
 
} 
 
.trackAccordion { 
 
    margin: 50px auto; 
 
    background-color: #2d2d2d; 
 
    height: 790px; //Check by commenting the height. 
 
    width: 296px; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-family: 'Helvetica'; 
 
    font-weight: bold; 
 
    padding-top: 30px; 
 
    font-size: 1em; 
 
    text-align: center; 
 
    overflow: hidden; 
 
}

<body> 
 
<ul class = "trackAccordion"> 
 
\t 
 

 
\t <a href="#">INDIVIDUAL CLASSES</a> 
 
\t <ul class = "course_beginner trackAccordion nestedElemAccor"> \t 
 
\t \t 
 
\t \t \t <li class = "nestedElems"> 
 
\t \t \t \t <a href="#" class="begNestElem">BEGINNER</a> 
 
\t \t \t \t \t <ul class="tracks"> 
 
\t \t \t \t \t <li>Intro to DJing (DJ 101)</li> 
 
\t \t \t \t \t <li>Intensive Beginners (DJ INT)</li> 
 
\t \t \t \t \t <li>Intensive Beginners (DJ INT)</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </li> 
 

 
\t \t \t <li class = "nestedElems"> 
 
\t \t \t <a href="#" class="intNestElem">INTERMEDIATE</a> 
 
\t \t \t \t \t <ul class="tracks"> 
 
\t \t \t \t \t <li>Mixing (M 202)</li> 
 
\t \t \t \t \t <li>Scratching (S 202)</li> 
 
\t \t \t \t \t <li>Music Production II (MP 202)</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </li> 
 

 
\t \t \t <li class = "nestedElems"> 
 
\t \t \t \t \t <a href="#" class="advNestElem">ADVANCED</a> 
 
\t \t \t \t \t <ul class="tracks"> 
 
\t \t \t \t \t <li>Mixing III (M 303)</li> 
 
\t \t \t \t \t <li>Mixing IV (M 404)</li> 
 
\t \t \t \t \t <li>Mixing V (M 505)</li> 
 
\t \t \t \t \t <li>Scratching III (S 303) </li> 
 
\t \t \t \t \t <li>Battle DJing (S 404)</li> 
 
\t \t \t \t \t <li>Music Production III (MP 303)</li> 
 
\t \t \t \t \t <li>Music Production IV (MP 404)</li> 
 
\t \t \t \t \t <li>Master Class - Team Routines</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t 
 
\t </ul> 
 
\t </li> <!-- END element which hold Individual class in accordian --> 
 

 
\t 
 
\t <a href="#">MORE OPTIONS</a> 
 
\t <ul class = "tracks" id = "more_Track"> 
 
\t <li>Private Lessons</li> 
 
\t <li>Group Events</li> 
 
\t <li>Workshops</li> 
 
\t </ul> 
 
\t </li> 
 
</ul> 
 

 

 
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> 
 
     
 
</body>

它不同於你的代碼，但你可以找到它

來源

2017-06-20 11:43:50

手風琴創建手風琴

回答

相關問題