Question

好的，我有以下代码，效果很好。我只需要修改它，以便在加载/刷新时打开一个默认面板。

#acc-label {
  display: block;
  float: left;
  height: 330px;
  width: 50px;
  margin-bottom: 10px;
  overflow: hidden;

  -moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
  -webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
  box-shadow:inset 1px 0px 0px 0px #485CBD;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
  background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
  background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
  background-color:#320BB8;
  border-style:solid;
  border-color:#321D85;
  color:#FFFFFF;
  font-size:15px;
  font-weight:bold;
  text-decoration:none;
  text-shadow:-1px -1px 0px #3227B0;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif; 

  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

#rad2 + label {
  -moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
  -webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
  box-shadow:inset 1px 0px 0px 0px #485CBD;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
  background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
  background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
  background-color:#320BB8;
  border-style:solid;
  border-color:#321D85;
  color:#FFFFFF;
  font-size:15px;
  font-weight:bold;
  text-decoration:none;
  text-shadow:-1px -1px 0px #3227B0;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad2 + label:hover {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320078', endColorstr='#320BB8');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05,         #320078), color-stop(1, #320BB8) );
  background:-moz-linear-gradient( top center, #320078 5%, #320BB8 100% );
  background-color:#9B0629;
  cursor: pointer;
}

/*SLIDES*/
.accslide {
  display: block;
  height: 330px;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow: hidden;

 color: #333;
  background: #fff;
  font: 12px/1.5 Helvetica, Verdana, sans-serif;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.accslide p, h2, img {
  width: 420px;
  padding-left: 10px;
}

.accslide img {
  margin-top: 10px;
}

input[type="radio"]:checked ~ .accslide {
  width: 450px;
}

手风琴效果很好。我只是不知道要添加什么来使第一个面板成为页面加载时打开的默认面板。

提前致谢。

Answer 1

嗯，没有任何参考我几乎猜测，但你可以通过以下方式完成它：

如果有类，例如first

.accordian-slide:nth-child(1) /* or :first-child */ {
   display: block; /* or whichever you're using */
}
.accordian-slide {
   display: none;
}

或者如果它使用添加到幻灯片中的.opened / .closed类等内容

.opened { 
   display: block;
}
.closed {
   display: none;
}

否则，如果有配置文件，您可以设置默认打开的窗格吗？

如何修改CSS代码让一个手风琴面板在开始时打开？

1 个答案: