Question

我有一些要求，因为手风琴和面板有问题。我希望我的手风琴包含其他手风琴。但是我的主页大小有些问题，因为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 (-) */

感谢您的帮助！

Answer 1

＆＃13;

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

＆＃13;

input:focus { outline: none; }

body,html{
	width: 100%;
	height: 100%;
	background: url('http://subtlepatterns.com/patterns/crossword.png');
	background-repeat: repeat;
}

a {
	color: white;
	outline: none !important;
}

a:-webkit-any-link{
	text-decoration: none !important;
}

ul{
 	list-style-type: none;
 	-webkit-padding-start: 0 !important;
 }

.trackAccordion{
	margin: 50px auto;
	background-color: #2d2d2d;
	height: 790px;
	width: 296px;
	border-radius: 5px; 
	color: white;
	font-family: 'Helvetica';
	font-weight: bold;
	padding-top: 30px;
	font-size: 1em;
	text-align: center;
	overflow: hidden;
}

ul.trackAccordion > li{
	color: white;
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: thick solid #464646;
}

ul.tracks > li{
	padding: 20px;
	background-color: #444444;
	margin-bottom: 2px;
	margin-left: -10px;
	text-align: left;
	font-weight: normal;
	font-size: 14px;

}

ul#cert_Track > li{
	border-left:thick solid #01cfe7;
	border-left-width:20px;
}

ul#kids_Track > li{
	border-left:thick solid #aa2e54;
	border-left-width:20px;
}

ul#more_Track > li{
	border-left:thick solid #618daa;
	border-left-width:20px;
}


.proTrack{
	padding-top: 0 !important;
}

.accoTrack{
	margin-bottom: 30px;
}
.blueBorder{
	background: #00d0e7;
	position: relative;
	left: -58px;
	padding: 20px 13px 19px 7px;
}

.nestedElemAccor{
	margin-top: -20px;
}
.nestedElems{
	border-bottom: none;
}

.begNestElem{
	background-color: #0bddf0;
	padding: 13px 105px 13px 105px
}

.intNestElem{
	background-color: #08a2b0;
	padding: 13px 105px 13px 105px
}

.advNestElem{
	background-color: #067983;
	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;
}

＆＃13;

    <body>
<ul class = "trackAccordion">
	

	<a href="#">INDIVIDUAL CLASSES</a>
	<ul class = "course_beginner trackAccordion nestedElemAccor">	
		
			<li class = "nestedElems">
				<a href="#" class="begNestElem">BEGINNER</a> 
					<ul class="tracks">
					<li>Intro to DJing (DJ 101)</li>
					<li>Intensive Beginners (DJ INT)</li>
					<li>Intensive Beginners (DJ INT)</li>
					</ul>
			</li>

			<li class = "nestedElems"> 
			<a href="#" class="intNestElem">INTERMEDIATE</a>
					<ul class="tracks">
					<li>Mixing (M 202)</li>
					<li>Scratching (S 202)</li>
					<li>Music Production II (MP 202)</li>
					</ul>
			</li>

			<li class = "nestedElems">
					<a href="#" class="advNestElem">ADVANCED</a> 
					<ul class="tracks">
					<li>Mixing III (M 303)</li>
					<li>Mixing IV (M 404)</li>
					<li>Mixing V (M 505)</li>
					<li>Scratching III (S 303) </li>
					<li>Battle DJing (S 404)</li>
					<li>Music Production III (MP 303)</li>
					<li>Music Production IV (MP 404)</li>
					<li>Master Class - Team Routines</li>
					</ul>
			</li>
		
	</ul>
	</li> <!-- END element which hold Individual class in accordian -->

	
	<a href="#">MORE OPTIONS</a> 
	<ul class = "tracks" id = "more_Track">
	<li>Private Lessons</li>
	<li>Group Events</li>
	<li>Workshops</li>
	</ul>
	</li>
</ul>


		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
        
</body>

＆＃13;

它与您的代码不同，但您可以从中找到建议

将手风琴演奏成手风琴

1 个答案: